為老的vueCli專案新增vite支援

guojikun發表於2021-09-13
VueVite

1、前言

接手公司的某個專案已經兩年了，現在每次啟動專案都接近1分鐘，hmr也要好幾秒的時間，but vite2釋出之後就看到了曙光，但是一直沒有動手進行升級，昨天終於忍不住了，升級之後幾秒鐘就完成了。

2、開始升級

注：只是升級了開發環境，打包依舊是webpack（也試過打包也用vite，但是打包後發現iview的字型圖示出現問題了，初步驗證是靜態資源的問題，vite打包後的靜態資源預設放到assets下，如果有解決的同學麻煩告知下解決方案）

v2.1 安裝vuecli外掛vite

vue add vit # 新增vite外掛

外掛安裝完成後會在package.json中的script新增：

{
    "script": {
        "vite": "node ./bin/vite"
    }
}

使用 pnpm 的同學，如果專案根目錄下沒有 .npmrc 檔案請自行新增並在檔案內加上 shamefully-hoist=true；否則安裝vite外掛可能會失敗。

2.2、執行專案並排查錯誤

2.2.1、TypeError: Cannot read property 'alias' of undefined

image.png

這個錯誤是因為在vue.config.js中的configureWebpack只能使用物件的配置方法(vue cli支援物件和函式兩種方式)

2.2.2 Unrestricted file system access to "/src/components/editPwd

出現這個問題的原因是：vite預設配置中的extensions不包含.vue;解決方法：

  • 1、在vue.config中加上extensions
// vue.config.js
module.exports = {
    configureWebpack:{
        resolve:{
            extensions: [".mjs", ".js", ".ts", ".jsx", ".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",
                changeOrigin: true,
                pathRewrite: {
                    "^/chargapp/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、升級完成

至此整個升級過程就結束了，總的來說還是比較順利的沒有太多坑，都是一些比較好解決的問題。最後感謝各位觀眾老爺的能看到最後 O(∩_∩)O 希望你能有所收穫 ?

相關文章