项目中把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文件里面.