项目中把webpack 打包改为vite 打包

项目痛点:

老vu e-cli1创建的项目,项目是ERP系统集成了很多很多管理,本地运行调试的时候,每次修改代码都需要等待3分钟左右的编译时间,严重影响开发效率.

解决方案:

采用vite构建项目工程

方案执行

第一步

使用vite脚手架构件一个项目,然后把build文件自定义的编译逻辑般到vite.config.js,然后把static文件,favicon.ico搬到public文件夹,把src文件夹搬到vite项目.

第二步处理环境变量

处理环境变量问题,因为webpack环境变量使用process.env,vite不支持,所有采用vite专用的import.meta.env,但是改动代码太多,就在vite.config.js配置全局变量取巧名字和process.env一致

复制代码
define: {
​
     "process.env": envConfig || {},
​
},

这样就不需要改动太多的原代码

第三步处理require

因为vite不支持require方法,只能采用import导入图片,但是发现项目使用了很多地方用require导入图片.取巧在main文件定义一个全局方法挂载在window上,这样全局就可使用require并且不需要改动项目代码.

复制代码
// 此require方法只对图片有用,其他require请用import
window.require = (path) => new URL(path.replace('@/assets/', '/assets/'), import.meta.url).href
第四步处理sass问题

因为vite默认使用 sass(Dart Sass)而不是 node-sass(Node Sass),处理方案使vite支持node-sass,或者采用dart sass,因为Sass 官方团队已宣布 node-sass 已弃用,并推荐使用 sass(Dart Sass),所有我们也使用Dart Sass,

发现项目使用/deep/,dart sass已经不支持,所有全局修改把/deep/改为::v-deep

第五步处理依赖包

尝试运行项目,根据报错分别根据老项目package.json配置的版本安装缺失的依赖包

第六步处理其他报错

项目运行报错jsx语法错误.发现项目有些采用了jsx语法,

处理安装@vitejs/plugin-vue2-jsx包,并在vite.config.js文件配置,发现有些vue文件script标签里面有些也有使用jsx语法,找了很多博客,文章发现需要把script的lang改为jsx,但是这样会影响原有的代码逻辑,没办法采用h函数把这些jsx写的代码dom都使用h函数重构一下.

这里大功告成项目基本正常运行了,

后续也发现了一下bug,图片丢失,发现打包的时候src/assets,采用require引用的图片没有被打包.解决方案把assets目录直接放在public文件夹内,这样打包就会包public目录下的文件都打包到dist文件里面.

相关推荐
乌兰麦朵10 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Code季风11 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾11 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿13 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸13 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic13 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮14 分钟前
vite打包的简单配置
前端
Codebee14 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试
流星稍逝15 分钟前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
知了一笑18 分钟前
独立开发问题记录-margin塌陷
前端