vue2項(xiàng)目如何將webpack遷移為vite并使用svg解決所有bug問(wèn)題
背景
1. vite是跟隨vue3誕生的一個(gè)工具，它讓我們?cè)陂_(kāi)發(fā)環(huán)境中的效率大大提升，其原因是因?yàn)樗∪チ宋覀冊(cè)陂_(kāi)發(fā)環(huán)境中的打包過(guò)程（因?yàn)槲覀冊(cè)趯?shí)際開(kāi)發(fā)環(huán)境中是不需要打包的，但是webpack卻會(huì)去執(zhí)行打包，大大降低了開(kāi)發(fā)效率），將ES 模塊源碼直接傳輸給瀏覽器，瀏覽器使用自帶的 <script module> 進(jìn)行解析支持
2. 但是vite其實(shí)是基于vue3進(jìn)行開(kāi)發(fā)的，很多時(shí)候我們的老項(xiàng)目使用的都是vue2版本的，這個(gè)時(shí)候想要使用vite應(yīng)該怎么做呢
過(guò)程
1. 通過(guò)vite創(chuàng)建vue項(xiàng)目
npm init @vitejs/app
2. 選擇vue模板（還支持react, vanilla, svelte, preact等）
3. 安裝老項(xiàng)目中使用到的npm包
注意：：這里也安裝老項(xiàng)目中的vue2版本，比如我用的是vue2.5.2版本的
4. 將老項(xiàng)目中的src文件復(fù)制到vite項(xiàng)目中，并運(yùn)行
5. 此時(shí)運(yùn)行項(xiàng)目，通常情況下會(huì)報(bào)錯(cuò)，這個(gè)報(bào)錯(cuò)信息是因?yàn)関ite.config.js中使用到的插件僅支持vue3版本以上，所以此時(shí)我們需要安裝一個(gè)支持vue2的插件
支持vue2的插件，并修改vite.config.js文件
npm install vite-plugin-vue2 -D
此時(shí)運(yùn)行項(xiàng)目，發(fā)現(xiàn)還會(huì)報(bào)錯(cuò)，（別急有報(bào)錯(cuò)說(shuō)明還有希望，沒(méi)報(bào)錯(cuò)就GG了，哈哈哈）；
根據(jù)報(bào)錯(cuò)信息知道，找不到vue-template-compiler模塊，因此我們安裝一下即可
npm install vue-template-compiler -D
安裝后再運(yùn)行項(xiàng)目，發(fā)現(xiàn)頁(yè)面沒(méi)有出來(lái)，打開(kāi)控制臺(tái)，又報(bào)錯(cuò)。。。
這次是因?yàn)檎也坏?app元素，vue2中掛載dom元素的方式在vite中并未生效，因此我們需要修改main.js中掛載根元素的方式
6. 項(xiàng)目運(yùn)行后，會(huì)發(fā)現(xiàn)此時(shí)接口請(qǐng)求報(bào)錯(cuò)（出現(xiàn)跨域問(wèn)題，或者404），這是因?yàn)関ue中代理和vite中代理有區(qū)別，需要配置成vite規(guī)定的代理
server: {
port: 8081, // 自己本地需要運(yùn)行的端口
fs: { // 不對(duì)根目錄訪問(wèn)做限制
strict: false,
},
proxy: {
'/Index': { // 不要寫(xiě)成根路徑?。。》駝t會(huì)直接跳轉(zhuǎn)到線上地址
target: 'http://www.需要代理的地址/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\//, '') // 不要寫(xiě)成rewrite: (path) => path.replace(/^\/Index/, '')?。?！否則會(huì)報(bào)404
},
'/Home': { // 不要寫(xiě)成根路徑?。?！否則會(huì)直接跳轉(zhuǎn)到線上地址
target: 'http://www.需要代理的地址/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\//, '')
},
}
},
此時(shí)再運(yùn)行，成功！?。。。ㄏ泊笃毡加袥](méi)有）
========= 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’報(bào)錯(cuò)，則需要換成這種寫(xiě)法
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ù)開(kāi)發(fā)需求設(shè)置css
width: 20px;
height: 20px;
}
</style>
注意??：vue3中SvgIcon組件代碼這么寫(xiě)
<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.全局注冊(cè)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
頁(yè)面中設(shè)置樣式的color即可
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
el-table 動(dòng)態(tài)給每行增加class屬性的示例代碼
這篇文章主要介紹了el-table 動(dòng)態(tài)給每行增加class屬性的示例代碼,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-03-03
Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
使用Element的InfiniteScroll 無(wú)限滾動(dòng)組件報(bào)錯(cuò)的解決
這篇文章主要介紹了使用Element的InfiniteScroll 無(wú)限滾動(dòng)組件報(bào)錯(cuò)的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟
upload上傳是前端開(kāi)發(fā)很常用的一個(gè)功能,在Vue開(kāi)發(fā)中常用的Element組件庫(kù)也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue3中的Token失效攔截處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
詳解vue中的動(dòng)態(tài)組件component和keep-alive
這篇文章主要介紹了詳解vue中的動(dòng)態(tài)組件component和keep-alive的相關(guān)資料,這大家需要注意include屬性和exclude屬性只能用一個(gè),不能同時(shí)使用,本文給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法
這篇文章主要給大家介紹了關(guān)于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法,vue比較常見(jiàn)的坑就是數(shù)據(jù)(后臺(tái)返回)更新了,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vue2+ElementUI利用計(jì)算屬性實(shí)現(xiàn)搜索框功能
這篇文章主要為大家詳細(xì)介紹了Vue2和ElementUI如何利用計(jì)算屬性實(shí)現(xiàn)搜索框功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-11-11
vue 路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),傳參方式可劃分為 params 傳參和 query 傳參,本文將給大家介紹如何通過(guò)不同方式在 Vue 3 中傳遞路由參數(shù),需要的朋友可以參考下2024-07-07
本篇文章主要介紹了vue 將頁(yè)面公用的頭部組件化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12