项目中把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一致

1. define: {
2. ​
3.     "process.env": envConfig || {},
4. ​
5. },

复制代码

这样就不必要改动太多的原代码
第三步处理require

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

1. // 此require方法只对图片有用,其他require请用import
2. 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文件内里.

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。