如何為老vue項目添加vite支持詳解
1、前言
接手公司的某個項目已經(jīng)兩年了，現(xiàn)在每次啟動項目都接近1分鐘，hmr也要好幾秒的時間，but vite2發(fā)布之后就看到了曙光，但是一直沒有動手進行升級，昨天終于忍不住了，升級之后幾秒鐘就完成了。
vite —— 一個由 vue 作者尤雨溪開發(fā)的 web 開發(fā)工具，它具有以下特點：
快速的冷啟動
即時的模塊熱更新
真正的按需編譯
2、開始升級
注：只是升級了開發(fā)環(huán)境，打包依舊是webpack（也試過打包也用vite，但是打包后發(fā)現(xiàn)iview的字體圖標(biāo)出現(xiàn)問題了，初步驗證是靜態(tài)資源的問題，vite打包后的靜態(tài)資源默認放到assets下，如果有解決的同學(xué)麻煩告知下解決方案）
2.1 安裝vuecli插件vite
vue add vit # 添加vite插件
插件安裝完成后會在package.json中的script添加：
{
"script": {
"vite": "node ./bin/vite"
}
}
使用 pnpm 的同學(xué)，如果項目根目錄下沒有 .npmrc 文件請自行添加并在文件內(nèi)加上 shamefully-hoist=true；否則安裝vite插件可能會失敗。
2.2、運行項目并排查錯誤
2.2.1、TypeError: Cannot read property 'alias' of undefined
這個錯誤是因為在vue.config.js中的configureWebpack只能使用對象的配置方法(vue cli支持對象和函數(shù)兩種方式)
2.2.2 Unrestricted file system access to "/src/components/editPwd
出現(xiàn)這個問題的原因是：vite默認配置中的extensions不包含.vue;解決方法：
1、在vue.config中加上extensions
// vue.config.js
module.exports = {
configureWebpack:{
resolve:{
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"]
}
}
}
2、所有vue組件在導(dǎo)入時加上.vue的后綴名。
2.2.3、啟動端口不是8080
vite默認的啟動端口是3000，所以需要在vue.config.js中的devServer中加上port:8080
// vue.config.js
module.exports = {
devServer:{
port: 8080
}
}
2.2.4、開發(fā)時的代理失效
代理失效的原因：在vuecli中的重寫配置是pathRewrite，而在vite中是rewrite.
解決方法：
module.exports = {
devServer: {
port: 8080,
proxy: {
"/api/cost/": {
target: "http://localhost:9331",
changeOrigin: true,
pathRewrite: {
"^/api/cost/": "/",
},
rewrite: path => path.replace(/^\/api\/cost\//, "/"), // 適配vite
},
"/api/import/": {
target: "http://localhost:9332",
changeOrigin: true,
pathRewrite: {
"^/api/import/": "/",
},
rewrite: path => path.replace(/^\/api\/import\//, "/"), // 適配vite
},
"/api/": {
target: "http://localhost:9333",
ws: true,
changeOrigin: true,
pathRewrite: {
"^/api/": "/",
},
rewrite: path => path.replace(/^\/api\//, "/"), // 適配vite
},
},
},
}
3、升級完成
至此整個升級過程就結(jié)束了，總的來說還是比較順利的沒有太多坑，都是一些比較好解決的問題。
到此這篇關(guān)于如何為老vue項目添加vite支持的文章就介紹到這了,更多相關(guān)老vue項目添加vite內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue?路由判斷方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了vue實現(xiàn)瀏覽器桌面通知的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue3+vite3+typescript實現(xiàn)驗證碼功能及表單驗證效果
這篇文章主要介紹了vue3+vite3+typescript實現(xiàn)驗證碼功能及表單驗證效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法
今天小編就為大家分享一篇vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3使用vue-router及路由權(quán)限攔截方式
這篇文章主要介紹了vue3使用vue-router及路由權(quán)限攔截方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue的v-model的幾種修飾符.lazy,.number和.trim的用法說明
這篇文章主要介紹了Vue的v-model的幾種修飾符.lazy,.number和.trim的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
今天小編就為大家分享一篇在vue中v-bind使用三目運算符綁定class的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
如何利用vue進行AJAX,其它vue本身不支持發(fā)送AJAX請求,需要使用vue-resource（vue1.0版本）或axios（vue2.0版本）第三方插件的支持才行2018-10-10
在vue-cli 3中給stylus、sass樣式傳入共享的全局變量
這篇文章主要介紹了在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue項目中使用this.$confirm方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09