为老 vueCli 项目添加 vite 支持

1、前言

接手公司的某个项目已经两年了，现在每次启动项目都接近 1 分钟，hmr 也要好几秒的时间，but vite2 发布之后就看到了曙光，但是一直没有动手进行升级，昨天终于忍不住了，升级之后几秒钟就完成了。

2、开始升级

提示

注：只是升级了开发环境，打包依旧是 webpack（也试过打包也用 vite，但是打包后发现 iview 的字体图标出现问题了， 初步验证是静态资源的问题，vite 打包后的静态资源默认放到 assets 下，如果有解决的同学麻烦告知下解决方案）

v2.1 安装 vuecli 插件 vite

vue add vite # 添加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.

解决方法：

// vue.config.js
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、升级完成

至此整个升级过程就结束了，总的来说还是比较顺利的没有太多坑，都是一些比较好解决的问题。最后感谢各位观众老爷的能看到最后 O(∩_∩)O 希望你能有所收获 😁