Vue2 项目迁移至 Vite 实战：解决兼容性与 SVG 图标配置

npm init @vitejs/app

npm install vite-plugin-vue2 -D

npm install vue-template-compiler -D

server: {
		port: 8081, // 自己本地需要运行的端口
		fs: { // 不对根目录访问做限制
			strict: false,
		},
		proxy: {
			'/Index': { // 不要写成根路径！！！否则会直接跳转到线上地址
				target: 'http://www.需要代理的地址/',
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\//, '') // 不要写成rewrite: (path) => path.replace(/^\/Index/, '')！！！否则会报404
			},
			'/Home': { // 不要写成根路径！！！否则会直接跳转到线上地址
				target: 'http://www.需要代理的地址/',
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\//, '')
			},
		}
	},

npm i vite-plugin-svg-icons -D

// 引入
import viteSvgIcons from 'vite-plugin-svg-icons'

// 插件配置
plugins: [
	viteSvgIcons({
		iconDirs: [path.resolve(process.cwd(), 'src/icons')], // 在src下新建文件夹icons
		symbolId: 'icon-[dir]-[name]'
	})
],

import { createSvgIconsPlugin } from ‘vite-plugin-svg-icons'

 createSvgIconsPlugin({
     iconDirs: [path.resolve(process.cwd(), 'src/icons')], // 在src下新建文件夹icons
     symbolId: 'icon-[dir]-[name]'
   })

<template>
	<svg aria-hidden="true">
		<use :href="symbolId" rel="external nofollow"  rel="external nofollow"  :fill="color" />
	</svg>
</template>

<script>
	export default {
		name: 'SvgIcon',
		props: {
			prefix: {
				type: String,
				default: 'icon',
			},
			name: {
				type: String,
				required: true,
			},
			color: {
				type: String,
				default: '#333',
			},
		},
		data() {
			return {
				symbolId: ''
			}
		},
		mounted() {
			this.symbolId = `#${this.prefix}-${this.name}`
		},
	}
</script>

<style scoped>
	svg { // 根据开发需求设置css
		width: 20px;
		height: 20px;
	}
</style>

<template>
  <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
    <use :xlink:href="symbolId" rel="external nofollow"  rel="external nofollow"   :fill="props.color" />
  </svg>
</template>
 
<script setup>
import { computed } from 'vue'
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: '#ffffff'
  },
  size: {
    type: String,
    default: '1rem'
  }
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>

<style scoped>
svg {
  width: 16px;
  height: 16px;
}
</style>

import 'virtual:svg-icons-register'

// main.ts中引入

import SvgIcon from './components/SvgIcon.vue'

createApp(App)
.use(router)
.component('svg-icon', SvgIcon)
.mount('#app')