vue2项目webpack转vite落泪踩坑总结

让你项目告别webpack，使用vite，启动项目和构建项目从此起飞 Vue迁移Vite：调整依赖、重构配置、适配代码，提升构建效率。不要偷懒了，赶快迁移吧，你将会为你所做的事情感到自豪

1. package.json 内容修改

插件添加

1. @vitejs/plugin-vue2 用来解析编译 Vue
2. autoprefixer 自动管理 CSS 前缀
3. request 用来发起 AJAX 获取是否已经上传图片到 CDN
4. vite 用来编译解析项目程序
5. vite-plugin-compression 用来压缩 bundle 文件中的静态资源插件
6. vite-plugin-progress 用来显示打包进度插件
7. archiver 用来压缩 bundle 包为 zip 文件

插件删除

1. 删除 webpack 相关依赖

"babel/plugin-proposal-optional-chaining",
"@babel/polyfill",
"@babel/preset-env",
"@commitlint/cli",
"@commitlint/config-conventional",
"@babel/plugin-proposal-optional-chaining",
"@babel/polyfill",
"@babel/preset-env",
"@babel/preset-react",
"@vue/cli-plugin-babel",
"@vue/cli-plugin-eslint",
"@vue/cli-plugin-router",
"@vue/cli-plugin-unit-mocha",
"@vue/cli-plugin-vuex",
"@vue/cli-service",
"@vue/test-utils",
"babel-eslint",
"babel-loader",
"babel-plugin-import",
"babel-plugin-istanbul",
"copy-webpack-plugin",
"filemanager-webpack-plugin",
"gifsicle",
"hard-source-webpack-plugin",
"html-webpack-plugin",
"image-webpack-loader",
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
"lodash-webpack-plugin",
"mozjpeg",
"pngquant",
"speed-measure-webpack-plugin",
"ts-loader",
"typescript",
"uglifyjs-webpack-plugin",
"vue-cli-plugin-commitlint",
"vue-loader",
"vue-template-compile",
"webpack-bundle-analyzer",
"zip-webpack-plugin",
"qrcodejs2"

scripts 调整

"serve": "vite",
"build": "cross-env NODE_ENV=production vite build --mode production",
"Test": "cross-env NODE_ENV=test vite build --mode test",
"buildTest": "cross-env NODE_ENV=test vite build --mode test"

2. index.html

添加入口文件：

<script type="module" src="/src/main.js"></script>

3. vue.config.js

删除 vue.config.js 配置文件

4. src/main.js里面内容调整

1. FastClick 使用方式调整 FastClick.FastClick

5. 使用 new URL 替换 require

get APPQrCode() {
  const test = {
    '4.0': new URL('./assets/images/mePage/APPqrcode/APPqrcode4.0-test.png', import.meta.url).href,
    '5.0': new URL('./assets/images/mePage/APPqrcode/APPqrcode5.0-test.png', import.meta.url).href,
  };
  const prod = {
    '4.0': new URL('./assets/images/mePage/APPqrcode/APPqrcode4.0-pro.png', import.meta.url).href,
    '5.0': new URL('./assets/images/mePage/APPqrcode/APPqrcode5.0-pro.png', import.meta.url).href,
  };
  return this.isTest ? test['5.0'] : prod['5.0']; // 由于推广5.0 故写死了
}

6. 新增一些plugin/*.js

1. vite-plugin-bunlde-zip.js 用来压缩 bundle 包的插件
2. vite-plugin-copy-file.js 用来拷贝文件
3. vite-plugin-image-cdn.js 用来打包时扫描图片是否超过 4kb * 2，如果文件过大目标代码图片地址为 CDN 链接，并复制图片资源到 uploadImgToCDN 文件下
4. vite-plugin-require-transform.js 用来打包或者运行项目时，使用 import 替换代码中 require 代码，使用 vite-plugin-commonjs 替代

7. ~别名需要删除

删除文件中别名 ~ 的使用

@import 'swiper/dist/css/swiper.min.css';

8. 全局替换

1. module.exports 全局替换为 export default

9. require('qs') 全局替换为 import 导入

10. 别名 ~assets 更换为 @assets

1、url(~assets/images/)全局替换为url(‘~assets/images/’)

2、url(~assets/images/) 全局替换为 url('@assets/images/')

3、前面1、2 点部分代码已经替换 ， 但通过配置 ~assets: path.resolve('./', 'src/assets')，可以解决 url 以及 @import 加载问题。但是通过 img 加载的还是不行，还是只能换回 @ 别名。

11. 删除部分文件

1. 删除 vue 文件 i18n 标签

2. 删除 src/shims-global.d.ts 和 shims-vue.d.ts

3. global is not defined 外部依赖报错解决

// global is not defined 外部依赖报错
利用 define 来解决

12. 页面路由 require is undefined 问题解决

1. 引入 vite-plugin-commonjs 来解决不是动态的 require
2. 将 router 所有路径引入改为 import 匹配 require 动态路由正则

搜索：(const )?(\w+) = (?resolve)? => require([(.+?)],\s*resolve);

替换： $1$2 = () => import($3);

13. html里面的require使用解决方案