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': { // 不要寫成根路徑！?。》駝t會(huì)直接跳轉(zhuǎn)到線上地址
target: 'http://www.需要代理的地址/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\//, '') // 不要寫成rewrite: (path) => path.replace(/^\/Index/, '')?。?！否則會(huì)報(bào)404
},
'/Home': { // 不要寫成根路徑?。。》駝t會(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ò)，則需要換成這種寫法
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組件代碼這么寫
<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)文章
Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入過(guò)程解析
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)ElementUI按需引入,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
Vite是一款非常輕量級(jí)的Web開(kāi)發(fā)框架，它可以幫助開(kāi)發(fā)者快速搭建一個(gè)開(kāi)發(fā)環(huán)境。Vite搭建的開(kāi)發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開(kāi)發(fā)者友好性，使開(kāi)發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。2023-02-02
在?Vue?項(xiàng)目中如何引用?assets?文件夾中的圖片(方式匯總)
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對(duì)路徑或通過(guò)@別名引用圖片,在CSS中,通過(guò)相對(duì)路徑或@別名引用圖片作為背景,在JavaScript中,通過(guò)import語(yǔ)句導(dǎo)入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項(xiàng)目中的圖片資源2024-09-09
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù),與data、el、ref是一個(gè)級(jí)別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調(diào)用其他key，完成需求，感興趣的朋友可以了解下2020-11-11
Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題的解決辦法,文中通過(guò)圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue提供了mixin、extends配置項(xiàng),最近使用中發(fā)現(xiàn)很好用,下面這篇文章主要給大家介紹了關(guān)于Vue中Mixin&extends的詳細(xì)使用方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vuex中的state屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目不能使用localhost訪問(wèn)的解決
這篇文章主要介紹了vue項(xiàng)目不能使用localhost訪問(wèn)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
基于vue-draggable 實(shí)現(xiàn)三級(jí)拖動(dòng)排序效果
這篇文章主要介紹了基于vue-draggable 實(shí)現(xiàn)三級(jí)拖動(dòng)排序效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01