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

更新時間：2021年09月15日 14:55:58 作者：Jason_Guo

Vite是一個開發(fā)環(huán)境工具，旨在提高我們的開發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項目添加vite支持的相關(guān)資料,需要的朋友可以參考下

1、前言

接手公司的某個項目已經(jīng)兩年了，現(xiàn)在每次啟動項目都接近1分鐘，hmr也要好幾秒的時間，but vite2發(fā)布之后就看到了曙光，但是一直沒有動手進(jìn)行升級，昨天終于忍不住了，升級之后幾秒鐘就完成了。

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

快速的冷啟動

即時的模塊熱更新

真正的按需編譯

2、開始升級

注：只是升級了開發(fā)環(huán)境，打包依舊是webpack（也試過打包也用vite，但是打包后發(fā)現(xiàn)iview的字體圖標(biāo)出現(xiàn)問題了，初步驗證是靜態(tài)資源的問題，vite打包后的靜態(tài)資源默認(rèn)放到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默認(rèn)配置中的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默認(rèn)的啟動端口是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
            },
        },
    },
}