vue2项目如何将webpack迁移为vite并使用svg解决所有bug问题
作者：zxo_apple
背景
1. vite是跟随vue3诞生的一个工具，它让我们在开发环境中的效率大大提升，其原因是因为它省去了我们在开发环境中的打包过程（因为我们在实际开发环境中是不需要打包的，但是webpack却会去执行打包，大大降低了开发效率），将ES 模块源码直接传输给浏览器，浏览器使用自带的 <script module> 进行解析支持
2. 但是vite其实是基于vue3进行开发的，很多时候我们的老项目使用的都是vue2版本的，这个时候想要使用vite应该怎么做呢
过程
1. 通过vite创建vue项目
npm init @vitejs/app
2. 选择vue模板（还支持react, vanilla, svelte, preact等）
3. 安装老项目中使用到的npm包
注意：：这里也安装老项目中的vue2版本，比如我用的是vue2.5.2版本的
4. 将老项目中的src文件复制到vite项目中，并运行
5. 此时运行项目，通常情况下会报错，这个报错信息是因为vite.config.js中使用到的插件仅支持vue3版本以上，所以此时我们需要安装一个支持vue2的插件
支持vue2的插件，并修改vite.config.js文件
npm install vite-plugin-vue2 -D
此时运行项目，发现还会报错，（别急有报错说明还有希望，没报错就GG了，哈哈哈）；
根据报错信息知道，找不到vue-template-compiler模块，因此我们安装一下即可
npm install vue-template-compiler -D
安装后再运行项目，发现页面没有出来，打开控制台，又报错。。。
这次是因为找不到#app元素，vue2中挂载dom元素的方式在vite中并未生效，因此我们需要修改main.js中挂载根元素的方式
6. 项目运行后，会发现此时接口请求报错（出现跨域问题，或者404），这是因为vue中代理和vite中代理有区别，需要配置成vite规定的代理
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(/^\//, '')
},
}
},
此时再运行，成功！！！！（喜大普奔有没有）
========= vite 增加svg插件使用 =========
vite中使用svg图
1.安装插件
npm i vite-plugin-svg-icons -D
2.配置vite.config.js文件， 并在src下新建文件夹icons，放入要使用的 .svg图片，如下：
// 引入
import viteSvgIcons from 'vite-plugin-svg-icons'
// 插件配置
plugins: [
viteSvgIcons({
iconDirs: [path.resolve(process.cwd(), 'src/icons')], // 在src下新建文件夹icons
symbolId: 'icon-[dir]-[name]'
})
],
注意：
如果使用 import viteSvgIcons from 'vite-plugin-svg-icons’报错，则需要换成这种写法
import { createSvgIconsPlugin } from ‘vite-plugin-svg-icons' createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/icons')], // 在src下新建文件夹icons
symbolId: 'icon-[dir]-[name]'
})
3. components下新建SvgIcon.vue文件，增加内容
<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>
注意⚠️：vue3中SvgIcon组件代码这么写
<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>
4.main.js中引入
import 'virtual:svg-icons-register'
5.全局注册svg
// main.ts中引入
import SvgIcon from './components/SvgIcon.vue'
createApp(App)
.use(router)
.component('svg-icon', SvgIcon)
.mount('#app')
6.组件中使用svg
template使用
效果图，正常显示。
如果要修改svg颜色，修改icons下 如account.svg中的fill字段为currentColor
页面中设置样式的color即可
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。