如何为老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
},
},
},
}
3、升级完成
至此整个升级过程就结束了，总的来说还是比较顺利的没有太多坑，都是一些比较好解决的问题。
到此这篇关于如何为老vue项目添加vite支持的文章就介绍到这了,更多相关老vue项目添加vite内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题。在这里分别分享两种方法，分别在前端vue中解决和在后台springboot中解决。2021-10-10
这篇文章主要介绍了Vue.js上传图片到阿里云OSS存储的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家详细介绍了vue的全选组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了vue从仓库state中取不到数据的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
今天小编就为大家分享一篇浅谈vue 锚点指令v-anchor的使用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue-cli项目中怎么使用mock数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
Vuex是一个专门为Vue.js应用程序开发的状态管理库。它采用了一个集中式的架构，将应用程序的所有组件的状态存储在一个单独的地方。这使得状态的管理和维护变得更加容易2023-03-03
vue2 element 实现表格点击详情返回时保留查询参数的示例代码
这篇文章主要介绍了vue2 element 实现表格点击详情返回时保留查询参数的示例代码,本文通过图文示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
今天小编就为大家分享一篇解决vue组件中click事件失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vue使用Swiper的案例详解，主要包括引入swiper,创建轮播图组件CarouselContainer.vue的详细代码，本文给大家介绍的非常详细，需要的朋友可以参考下2022-06-06
最新评论