项目痛点:
老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文件里面.