vue2老項(xiàng)目vite升級(jí)改造過(guò)程記錄
前言
Vite是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗(yàn)。它主要由兩部分組成：
- 一個(gè)開發(fā)服務(wù)器，它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能，如速度快到驚人的 模塊熱更新（HMR）。
- 一套構(gòu)建指令，它使用 Rollup 打包你的代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過(guò)的靜態(tài)資源。
Vite 意在提供開箱即用的配置，同時(shí)它的 插件 API 和 JavaScript API 帶來(lái)了高度的可擴(kuò)展性，并有完整的類型支持。
vite包含如下特點(diǎn)：
- 光速啟動(dòng)
- 熱模塊替換
- 按需編譯
本次在開發(fā)環(huán)境增加vite的啟動(dòng)方式，提升開發(fā)效率，在生產(chǎn)環(huán)境保持原有模式。
背景
本次改造的工程是公司內(nèi)一個(gè)很重要，迭代維護(hù)了3年的老項(xiàng)目，隨著項(xiàng)目代碼量的逐漸增加，項(xiàng)目啟動(dòng)速度的速度越來(lái)越慢，已經(jīng)嚴(yán)重影響了開發(fā)效率，啟動(dòng)時(shí)間接近2分鐘。
該項(xiàng)目由@vue/cli 搭建的webpack模版，之前做過(guò)一次webpack3->的一次升級(jí)，現(xiàn)使用webpack4.x版本。
在搭建vite的過(guò)程中，理想狀況是業(yè)務(wù)代碼的0改動(dòng)。
改造過(guò)程
保留webpack的選項(xiàng)
由于vite使用ES6 Module方式組織代碼,index.html的導(dǎo)入方式不通，復(fù)制index.html->prod.html
并修改webpack HtmlWebpackPlugin插件的template（開發(fā)和生產(chǎn)配置會(huì)有不同，保留原有配置即可）
new HtmlWebpackPlugin({ template: 'prod.html', }),
vite引入和配置
安裝
npm i vite --save-dev
并在根目錄新建vite.config.js文件
import { defineConfig } from 'vite'
import path from 'path'
export default () => defineConfig({
resolve: {
extensions: ['.js', '.vue', '.json', '.less'],
alias: {
vue: 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'src'),
}
},
server: {
port: 8080, // vite默認(rèn)是3000端口，保留原有的端口號(hào)
proxy: {
'/api': {
target: 'http://baidu.com/',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})添加 packge.json 中 scripts 命令，并改變?cè)械膚ebpack命令
{
"scripts": {
"dev": "vite" ,
"dev:w": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --profile"
}
}修改 index.html中的入口文件導(dǎo)入方式
配置完后我們就可以嘗試運(yùn)行vite了
命令行輸入npm run dev
運(yùn)行后，我們可以看到很多報(bào)錯(cuò)，這么多錯(cuò)誤信息如果手動(dòng)修改的話，無(wú)疑是一項(xiàng)巨大的工程，而且這些改動(dòng)沒(méi)有任價(jià)值。針對(duì)vite 工程的改造，我們可以通過(guò)插件解決對(duì)應(yīng)問(wèn)題。
vite-plugins引入
雖然 vite 發(fā)展很快，npm 上面也陸陸續(xù)續(xù)有vite的插件更新，但是總有一些沒(méi)有覆蓋到的場(chǎng)景，官方的核心插件如下，我們的項(xiàng)目使用的是vue2版本的，所以用的是vite-plugin-vue2插件。
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [
createVuePlugin({
jsx: true,
})
],
}針對(duì)這個(gè)場(chǎng)景，使用的是自己寫了一個(gè)插件vite-plugin-vue2-jsx，將需要修改的處理，全部由插件來(lái)進(jìn)行轉(zhuǎn)化
使用 vite-plugin-vue2-jsx 替換 vite-plugin-vue2 ，自動(dòng)處理
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2-jsx'
export default {
plugins: [
createVuePlugin({
jsx: true,
})
],
}require報(bào)錯(cuò)問(wèn)題
這個(gè)問(wèn)題vite是使用ESModule編譯的，不支持CommonJs的原因，所以我們就需要將CommonJs 轉(zhuǎn)換為ESModule。
項(xiàng)目中存在兩種情況：
- 圖片require引用
<img class="logo" :src="require('./images/logo.png')"/>在npm上找了半天也沒(méi)找到我需要的插件，針對(duì)這個(gè)場(chǎng)景，索性自己寫了一個(gè)插件vite-plugin-image-require
// vite.config.js
import { imageRequirePlugin } from 'vite-plugin-image-require'
export default {
plugins: [
imageRequirePlugin()
],
}2. 枚舉的引用
通過(guò)引入 vite-plugin-require-transform 插件來(lái)處理
npm i vite-plugin-require-transform --save-dev
配置
import requireTransform from 'vite-plugin-require-transform';
export default defineConfig({
plugins: [
requireTransform({fileRegex:/.js$|.vue$/}),
],
});轉(zhuǎn)換 @import ~ 別名
resolve: {
alias: {
'~': path.join(__dirname, 'node_modules'),
}
},webpack的 process.env 的環(huán)境變量在項(xiàng)目中的使用導(dǎo)致的頁(yè)面報(bào)錯(cuò)，無(wú)法加載
define: {
'process.env': process.env
},完整配置
import { defineConfig } from 'vite'
import { imageRequirePlugin } from 'vite-plugin-image-require'
import { createVuePlugin } from 'vite-plugin-vue2-jsx'
import requireTransform from 'vite-plugin-require-transform';
import path from 'path'
export default () => defineConfig({
define: {
'process.env': process.env
},
plugins: [
createVuePlugin({
jsx: true,
}),
requireTransform({
fileRegex:/.js$|.vue$/
}),
imageRequirePlugin(),
],
resolve: {
extensions: ['.js', '.vue', '.json', '.less'],
alias: {
vue: 'vue/dist/vue.esm.js',
'@': path.resolve(__dirname, 'src'),
'~': path.join(__dirname, 'node_modules'),
}
},
server: {
port: 8080, // vite默認(rèn)是3000端口，保留原有的端口號(hào)
proxy: {
'/api': {
target: 'http://baidu.com/',
changeOrigin: true,
rewrite: path => path.replace(/^/api/, '')
}
}
}
})結(jié)束
# 使用vite啟動(dòng)服務(wù) npm run dev # 使用webpack啟動(dòng)服務(wù) npm run dev:w
總結(jié)
到此這篇關(guān)于vue2老項(xiàng)目vite升級(jí)改造的文章就介紹到這了,更多相關(guān)vue2老項(xiàng)目vite升級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3?中使用?jsx?開發(fā)的詳細(xì)過(guò)程
這篇文章主要介紹了vue3?中使用?jsx?開發(fā),本文著重說(shuō)一下在使用 .vue 文件和 .jsx 文件在使用語(yǔ)法上的差異，需要的朋友可以參考下2022-09-09
vue.js滾動(dòng)條插件vue-scroll的基本用法
在移動(dòng)端或PC,頁(yè)面的部分內(nèi)容常常需要我們讓其在頁(yè)面滾動(dòng),這篇文章主要給大家介紹了關(guān)于vue.js滾動(dòng)條插件vue-scroll的基本用法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)
本文主要介紹了使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue實(shí)現(xiàn)點(diǎn)擊顯示不同圖片的效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊顯示不同圖片的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
使用vue ant design分頁(yè)以及表格分頁(yè)改為中文問(wèn)題
這篇文章主要介紹了使用vue ant design分頁(yè)以及表格分頁(yè)改為中文問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
Vue中代碼傳送(teleport)的實(shí)現(xiàn)
本文主要介紹了Vue中代碼傳送(teleport)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
解決vite.config.js無(wú)法使用__dirname的問(wèn)題
這篇文章主要介紹了解決vite.config.js無(wú)法使用__dirname的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue與iframe之間的信息交互的實(shí)現(xiàn)
這篇文章主要介紹了vue與iframe之間的信息交互的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家介紹了Vue中如何優(yōu)雅的捕獲 Promise 異常詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
顧名思義，vue路由傳參是指嵌套路由時(shí)父路由向子路由傳遞參數(shù)，否則操作無(wú)效。傳參方式可以劃分為params傳參和query傳參，params傳參又可以分為url中顯示參數(shù)和不顯示參數(shù)兩種方式。具體區(qū)分和使用后續(xù)分析2022-09-09