前言
问题背景
在本次前端实践项目中,由于并未接触过vite
打包.所以在新建项目的时候采用webpack
打包方式,好处是简单方便,因为经常使用,但是随着新伙伴的提议,再根据实际开发过程中体积的增加,确实觉得webpack
打包方式的速度实在感人,因为打包方式的不同,两者时间差距几乎几何倍的增加
当我们开始构建越来越大型的应用时,需要处理的JavaScript
代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于JavaScript
开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。 ---引用之vite官方回答
通俗的讲:
传统WebPack
打包方式是一股脑的将文件与modus
全部编译,即使是热启动,也会重新编译,而这个过程的耗时会随着modus
的增加而增加.
而vite在启动过程中并不会全部加载modus
,它会根据你的需要即时编译,更严谨的说就是,因为现代浏览器原生支持了ESM
方式,vite
在此启动基础上,将打包过程交给了浏览器动态执行,也就是当页面需要呈现在开发者屏幕上时才会被处理
迁移过程
安装工具并配置文件结构
选中你的webpack项目目录页面,右键使用终端打开,以在当前目录执行接下来的代码
不管目录中存不存在node_Modus目录都建议执行一次install 以确保模块处于正常待定状态
npm install
此时需要全局安装一个代码迁移工具 wp2vite
,此工具可以根据 vue.config.js
生成 vite.congfig.js
配置文件,关于此工具的说明文档可以参考官方仓库 wp2vite
需要注意的是,这个工具也有很多的坑
npm install -g wp2vite
wp2vite --config=./vue.config.js //你的webpack配置文件

当执行完以上命令后请再次执行一遍
npm install
建议删掉node_Modus
文件夹后重新执行当执行完上述所有代码之后,我们需要对项目结构进行配置
- 删除原有
public
目录下的index.html
文件 - 修改根目录中的
index.html
,引用自己的main.js/ts
文件
<script type="module" src="/src/main.ts"></script>
注意:配置Vite.config.js
- 设置
alias
,也就是目录别名,增加新的绝对值@
let alias = {
'.git': path.resolve(__dirname, './.git'),
'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'),
}
意此时写法有变,将pathRewrite
修改为rewrite
,举个栗子
原项目vue.config.js
'/api': {
target: `http://localhost:7777`,
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '',
},
},
新项目vite.config.js
'/api': {
target: `http://localhost:8180`,
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
此时使用vite
运行项目,正常情况下就可以跑起来了
npm run dev
但某些情况下因为插件的版本问题造成的一个 vite.createFilter is not a function
错误
这是一个vite
版本不兼容的错,请看下面解决方法:
重新运行看到此项字样即可迁移成功,
但是别太高兴,在用来某些插件的情况下,即时运行成功,页面也白屏,并显示不出来
Require报错
F12
控制台上看到一行报错'Require is not defined'
此项报错是因为vite
并不支持require
导入,如果项目中使用此项导入媒体或者json数据,我们使用相同功能的其他工具代替即可
解决方法一:使用import.meta.globEager()
代替,示范如下
const requires = require.context('@/modules', true, /router\.ts$/);//原有
const requires = import.meta.globEager("@/modules/*/router.ts")//修改后
此项推荐在配置路由等操作时使用
解决方法二:使用import
直接导入,示范如下
修改前:
修改后:
此项方法推荐用于媒体或JSON等导入,但是编译器发生了一个报错,如果使用VScode
,会提示一个为找不到模块“../mock/MenuData.json”。请考虑使用 "--resolveJsonModule" 导入带 ".json" 扩展的模块。ts(2732)
的错误,这是因为vite
中TS
并没有对JSON
等文件导入的支持,我们前往tsconfig.json
文件中开启,值得注意的是,加入此项功能据说会对jQuery
产生影响,具体我并不清楚,请根据实际情况取舍
当解决完上面的所有问题,请再次运行项目即可成功
npm run dev
目前就这么结束了,如果有其中步骤遇到更好的解决方案,欢迎讨论
参考资料
wp2vite仓库
vue3+vite项目,安装依赖运行报错....
【webpack转vite】操作流程与问题
angular引入json文件报错找不到模块....