怎么為舊vue項目添加vite支持

這篇文章主要為大家展示了“怎么為舊vue項目添加vite支持”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“怎么為舊vue項目添加vite支持”這篇文章吧。

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
            },
        },
    },
}

以上是“怎么為舊vue項目添加vite支持”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！