这篇文章主要为大家展示了“怎么为旧vue项目添加vite支持”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么为旧vue项目添加vite支持”这篇文章吧。
接手公司的某个项目已经两年了，现在每次启动项目都接近1分钟，hmr也要好几秒的时间，but vite2发布之后就看到了曙光，但是一直没有动手进行升级，昨天终于忍不住了，升级之后几秒钟就完成了。
vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：
快速的冷启动
即时的模块热更新
真正的按需编译
注：只是升级了开发环境，打包依旧是webpack（也试过打包也用vite，但是打包后发现iview的字体图标出现问题了，初步验证是静态资源的问题，vite打包后的静态资源默认放到assets下，如果有解决的同学麻烦告知下解决方案）
计算
安全
数据库
网络和加速
企业服务
vue add vit # 添加vite插件插件安装完成后会在package.json中的script添加：
{
"script": {
"vite": "node ./bin/vite"
}
}使用 pnpm 的同学，如果项目根目录下没有 .npmrc 文件请自行添加并在文件内加上 shamefully-hoist=true；否则安装vite插件可能会失败。
这个错误是因为在vue.config.js中的configureWebpack只能使用对象的配置方法(vue cli支持对象和函数两种方式)
出现这个问题的原因是：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的后缀名。
vite默认的启动端口是3000，所以需要在vue.config.js中的devServer中加上port:8080
// vue.config.js
module.exports = {
devServer:{
port: 8080
}
}代理失效的原因：在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支持”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
