如何為老vue項目添加vite支持詳解

Posted on by

1、前言

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

vite —— 一個由 vue 作者尤雨溪開發的 web 開發工具，它具有以下特點：

快速的冷啟動

即時的模塊熱更新

真正的按需編譯

2、開始升級

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

2.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

這個錯誤是因為在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: {
                    "^/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、升級完成

至此整個升級過程就結束瞭，總的來說還是比較順利的沒有太多坑，都是一些比較好解決的問題。

到此這篇關於如何為老vue項目添加vite支持的文章就介紹到這瞭,更多相關老vue項目添加vite內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：