0
点赞
收藏
分享

微信扫一扫

为老的vueCli项目添加vite支持

1、前言

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

2、开始升级

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

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

为老的vueCli项目添加vite支持_vite

这个错误是因为在​​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、升级完成

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



举报

相关推荐

0 条评论