如何為老vue專案新增vite支援詳解
1、前言
接手公司的某個專案已經兩年了,現在每次啟動專案都接近1分鐘,hmr也要好幾秒的時間,but vite2釋出之後就看到了曙光,但是一直沒有動手進行升級,昨天終於忍不住了,升級之後幾秒鐘就完成了。
vite —— 一個由 作者尤雨溪開發的 web 開發工具,它具有以下特點:
快速的冷啟動
即時的模組熱更新
真正的按需編譯
2、開始升級
注:只是升級了開發環境,打包依舊是webpack(也試過打包也用vite,但是打包後發現iview的字型圖標出現問題了,初步驗證是靜態資源的問題,vite打包後的靜態資源預設放到assets下,如果有解決的同學麻煩告知下解決方案)
2.1 安裝vuecli外掛vite
vue add vit # 新增vite外掛
外掛安裝完成後會在package.on中的script新增:
{ "script": { "vite": "node ./bin/vite" } }
使用 pnpm 的同學,如果專案根目錄下沒有 .npmrc 檔案請自行添www.cppcns.com加並在檔案內加上 shamefully-hoist=true;否則安裝vite外掛可能會失敗。
2.2、執行專案並排查錯誤
2.2.1、TypeError: Cannot read property 'alias' of undefined
這客棧個錯誤是因為在vue.config.js中的configureWebpack只能使用物件的配置方法(vue cli支援物件和函式兩種方式)
2.2.2 Unrestricted file system a程式設計客棧ccess to "/src/components/editPwd
出現這個問題的原因是:vite預設配置中的extensions不包含.vue;解決方法:
1、在vue.config中加上extensions
// vue.config.js
module.exports = {
configureWebpack:{
resolve:{
extensions: [".mjs",".js",".ts",".jsx",http://www.cppcns.com".tsx",".json",".vue"]
}
}
}
2、所有vue元件在匯入時加上.vue的字尾名。
2.2.3、啟動埠不是8080
vite預設的啟動埠是3000,所以需要在vue.config.js中的devServer中加上port:8080
// vue.config.js module.exports = { devServer:{ port: 8080 } }
2.2.4、開發時的代理失效
代理失效的原因:在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",pathRewrite: { "^/api/import/": "/",rewrite: path => path.replace(/^\/api\/import\//,"/api/": { target: "http://localhost:9333",ws: true,pathRewrite: { "^/api/": "/",rewrite: path => path.replace(/^\/api\//,}
3、升級完成
至此整個升級過程就結束了,總的來說還是比較順利的沒有太多坑,都是一些比較好解決的問題。
到此這篇關於如何為老vue專案新增vite支援的文章就介紹到這了,更多相關老vue專案新增vite內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!