快捷導(dǎo)航

如何為老vue項(xiàng)目添加vite支持詳解

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

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

1、前言

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

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

快速的冷啟動(dòng)

即時(shí)的模塊熱更新

真正的按需編譯

2、開(kāi)始升級(jí)

注：只是升級(jí)了開(kāi)發(fā)環(huán)境，打包依舊是webpack（也試過(guò)打包也用vite，但是打包后發(fā)現(xiàn)iview的字體圖標(biāo)出現(xiàn)問(wèn)題了，初步驗(yàn)證是靜態(tài)資源的問(wèn)題，vite打包后的靜態(tài)資源默認(rèn)放到assets下，如果有解決的同學(xué)麻煩告知下解決方案）

2.1 安裝vuecli插件vite

vue add vit # 添加vite插件

插件安裝完成后會(huì)在package.json中的script添加：

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

使用 pnpm 的同學(xué)，如果項(xiàng)目根目錄下沒(méi)有 .npmrc 文件請(qǐng)自行添加并在文件內(nèi)加上 shamefully-hoist=true；否則安裝vite插件可能會(huì)失敗。

2.2、運(yùn)行項(xiàng)目并排查錯(cuò)誤

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

這個(gè)錯(cuò)誤是因?yàn)樵趘ue.config.js中的configureWebpack只能使用對(duì)象的配置方法(vue cli支持對(duì)象和函數(shù)兩種方式)

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

出現(xiàn)這個(gè)問(wè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)入時(shí)加上.vue的后綴名。

2.2.3、啟動(dòng)端口不是8080

vite默認(rèn)的啟動(dòng)端口是3000，所以需要在vue.config.js中的devServer中加上port:8080

// vue.config.js
module.exports = {
    devServer:{
        port: 8080
    }
}

2.2.4、開(kāi)發(fā)時(shí)的代理失效

代理失效的原因：在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
            },
        },
    },
}