webpack转vite的详细操作流程与问题总结
更新时间：2023年03月17日 14:48:39 作者：白茶_White
Vite是新一代的前端开发与构建工具,相比于传统的webpack,Vite 有着极速的本地项目启动速度(通常不超过5s)以及极速的热更新速度(几乎无感知),下面这篇文章主要给大家介绍了关于webpack转vite的详细操作流程与问题总结的相关资料,需要的朋友可以参考下
前言
最近在开发一个超级大的管理端项目，每次启动都要在8、9分钟，热更新一次也需要40秒,十分折磨，试过很多提速方法，都没有效果；周二晚上看到了vite-下一代前端开发与构建工具,周三上班就开始从网上翻找教程，经历过无数bug,历经两天，终于解决，特此记录一下所有流程与踩坑经历
一、全局安装wp2vite
npm install -g wp2vite
二、在项目中执行一下命令
执行之前记得安装好依赖：npm install
wp2vite --config=./vue.config.js //你的webpack配置文件
执行完以上命令后再执行一遍：npm install
截止这一步，主要操作搞定
三、项目配置操作
1、删除原有public目录下的index.html文件
2、修改根目录下的index.html，引用自己的main.js文件
<script type="module" src="/src/main.ts"></script>
我的是ts，可自行修改
3、重点：vite.config.js
①设置alias,增加绝对路径@
let alias = {
'.git': path.resolve(__dirname, './.git'),
'docker': path.resolve(__dirname, './docker'),
'docs': path.resolve(__dirname, './docs'),
'node_modules': path.resolve(__dirname, './node_modules'),
'public': path.resolve(__dirname, './public'),
'src': path.resolve(__dirname, './src'),
'@': path.resolve(__dirname, 'src'),
}
②设置proxy,就是你的代理
在proxy对象中添加代理
注意此时写法有变，将pathRewrite修改为rewrite，举个栗子
vue.config.js
'/api': {
target: `http://localhost:8180`,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '',
},
},
vite.config.js
'/api': {
target: `http://localhost:8180`,
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
4、require报错
如果你用到了require.context（），请替换为import.meta.globEager（），示范如下
const requires = require.context('@/modules', true, /router\.ts$/);//原有
const requires = import.meta.globEager("@/modules/*/router.ts")//修改后
5、path.resolve报错
先安装依赖
npm install path-browserify --save
修改引入方式为
import path from 'path-browserify'
四、启动项目
npm run dev
五、速度比较
启动速度
vite
webpack
实在太慢，不想截图了
热更新速度
biu~bang //超级快
录了视频，但是要转成gif，不想转，改vue页面改完就能生效，都不用刷新页面；改ts文件也是立刻生效，会自动刷新页面
总结
到此这篇关于webpack转vite的详细操作流程与问题总结的文章就介绍到这了,更多相关webpack转vite操作流程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue车牌输入组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要为大家详细介绍了vue图片上传组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要为大家介绍了Vue3插槽Slot实现原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
今天小编就为大家分享一篇vue移动端微信授权登录插件封装的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue项目判断开发、测试、正式环境过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中异步数据获取方式(确保数据被获取)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了vue的路由动画切换页面无法读取meta值的bug记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了如何Vue利用实现实时刷新时间的功能,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下2023-12-12
Vue项目配置、切换主题颜色详细教程(mixin+scss方式,简单高效)
这篇文章主要给大家介绍了关于Vue项目配置、切换主题颜色(mixin+scss方式)的相关资料,根据预设的配色方案,在前端实现动态切换系统主题颜色,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-11-11
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论