vue2項目如何將webpack遷移為vite并使用svg解決所有bug問題
背景
1. vite是跟隨vue3誕生的一個工具，它讓我們在開發(fā)環(huán)境中的效率大大提升，其原因是因為它省去了我們在開發(fā)環(huán)境中的打包過程（因為我們在實際開發(fā)環(huán)境中是不需要打包的，但是webpack卻會去執(zhí)行打包，大大降低了開發(fā)效率），將ES 模塊源碼直接傳輸給瀏覽器，瀏覽器使用自帶的 <script module> 進行解析支持
2. 但是vite其實是基于vue3進行開發(fā)的，很多時候我們的老項目使用的都是vue2版本的，這個時候想要使用vite應(yīng)該怎么做呢
過程
1. 通過vite創(chuàng)建vue項目
npm init @vitejs/app
2. 選擇vue模板（還支持react, vanilla, svelte, preact等）
3. 安裝老項目中使用到的npm包
注意：：這里也安裝老項目中的vue2版本，比如我用的是vue2.5.2版本的
4. 將老項目中的src文件復(fù)制到vite項目中，并運行
5. 此時運行項目，通常情況下會報錯，這個報錯信息是因為vite.config.js中使用到的插件僅支持vue3版本以上，所以此時我們需要安裝一個支持vue2的插件
支持vue2的插件，并修改vite.config.js文件
npm install vite-plugin-vue2 -D
此時運行項目，發(fā)現(xiàn)還會報錯，（別急有報錯說明還有希望，沒報錯就GG了，哈哈哈）；
根據(jù)報錯信息知道，找不到vue-template-compiler模塊，因此我們安裝一下即可
npm install vue-template-compiler -D
安裝后再運行項目，發(fā)現(xiàn)頁面沒有出來，打開控制臺，又報錯。。。
這次是因為找不到#app元素，vue2中掛載dom元素的方式在vite中并未生效，因此我們需要修改main.js中掛載根元素的方式
6. 項目運行后，會發(fā)現(xiàn)此時接口請求報錯（出現(xiàn)跨域問題，或者404），這是因為vue中代理和vite中代理有區(qū)別，需要配置成vite規(guī)定的代理
server: {
port: 8081, // 自己本地需要運行的端口
fs: { // 不對根目錄訪問做限制
strict: false,
},
proxy: {
'/Index': { // 不要寫成根路徑?。?！否則會直接跳轉(zhuǎn)到線上地址
target: 'http://www.需要代理的地址/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\//, '') // 不要寫成rewrite: (path) => path.replace(/^\/Index/, '')?。。》駝t會報404
},
'/Home': { // 不要寫成根路徑?。?！否則會直接跳轉(zhuǎn)到線上地址
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文件，增加內(nèi)容
<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 { // 根據(jù)開發(fā)需求設(shè)置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
頁面中設(shè)置樣式的color即可
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項目中實現(xiàn)ElementUI按需引入過程解析
這篇文章主要介紹了Vue項目中實現(xiàn)ElementUI按需引入,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
Vite是一款非常輕量級的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強大的Web應(yīng)用程序。2023-02-02
在?Vue?項目中如何引用?assets?文件夾中的圖片(方式匯總)
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對路徑或通過@別名引用圖片,在CSS中,通過相對路徑或@別名引用圖片作為背景,在JavaScript中,通過import語句導(dǎo)入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項目中的圖片資源2024-09-09
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^來的數(shù)據(jù),與data、el、ref是一個級別的配置項,下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調(diào)用其他key，完成需求，感興趣的朋友可以了解下2020-11-11
Vue對Element中el-tab-pane添加@click事件無效問題解決
這篇文章主要給大家介紹了關(guān)于Vue對Element中el-tab-pane添加@click事件無效問題的解決辦法,文中通過圖文以及代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
vue提供了mixin、extends配置項,最近使用中發(fā)現(xiàn)很好用,下面這篇文章主要給大家介紹了關(guān)于Vue中Mixin&extends的詳細使用方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vuex中的state屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項目不能使用localhost訪問的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
基于vue-draggable 實現(xiàn)三級拖動排序效果
這篇文章主要介紹了基于vue-draggable 實現(xiàn)三級拖動排序效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01