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

相关推荐
江城开朗的豌豆13 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤21 分钟前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞21 分钟前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作
摸鱼仙人~22 分钟前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
前端进阶者23 分钟前
支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
前端
星空下的曙光23 分钟前
pnpm vs npm区别对比
前端·npm·node.js
啃火龙果的兔子24 分钟前
React 图标库发布到 npm 仓库
前端·react.js·npm
江城开朗的豌豆25 分钟前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js
JiaLin_Denny26 分钟前
如何在在NPM发布一个React组件
前端·react.js·npm·npm组件·npm发布·npm发布组件·npm如何发布组件
第六页第七页序26 分钟前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js