webpack+vue2 升级 vite+vue2 记录

2024 年了，webpack 构建的 vue2 项目，由于路由较多，每次修改都会出现编译时间较长的问题（平均 10～40 秒），长期开发的话，非常的不友好。因此决定升级 vite构建。参考了几篇文章，基本 每篇遇到的坑都不少。

本文做一个记录。

主要是各个依赖的版本问题。

全局安装的 vite 版本，建议版本 4.5.3，因为这是对 vue2 能支持的最高版本了。

"vite": "^4.5.3",

vue建议使用2.7.x，既能对 setup 有支持，而且，完全支持 vue2 的特性。

"vue": "^2.7.14",

同时，必备的 vite 对 vue2 的支持插件 2.3.x

"@vitejs/plugin-vue2": "2.3.1",

sass 版本，建议使用 1.76，因为高于这个版本，@import 语法以及嵌套插入父元素属性的写法会被标记为不推荐，出现大量的警告。

 "sass": "1.76",

额外的，我们很大概率为了优化首屏加载速度，可能会用到 cdn，那就使用插件

"vite-plugin-cdn-import": "^1.0.1",

最后附上用到的 package.json 以及 vite.config.js 配置

{"name": "basic-ui","version": "4.0.0","private": true,"scripts": {"pre": "cnpm install || yarn --registry https://registry.npmmirror.com/ || npm install --registry https://registry.npmmirror.com/ ","dev": "vite","build": "vite build --mode production"},"dependencies": {"@chenfengyuan/vue-qrcode": "^1.0.1","@riophae/vue-treeselect": "0.4.0","@sscfaith/avue-form-design": "1.3.12","autoprefixer": "^10.4.20","avue-plugin-ueditor": "^0.2.18","axios": "^0.18.0","babel-polyfill": "^6.26.0","classlist-polyfill": "^1.2.0","clipboard": "^2.0.4","codemirror": "^5.53.2","crypto-js": "^3.1.9-1","dayjs": "^1.11.13","echarts": "^4.2.1","element-ui": "2.12.0","js-cookie": "^2.2.0","less-loader": "^6.0.0","nprogress": "^0.2.0","qs": "^6.13.0","script-loader": "^0.7.2","sockjs-client": "1.0.0","stomp-websocket": "2.3.4-next","vue": "^2.7.14","vue-axios": "^2.1.2","vue-clipboard2": "^0.3.0","vue-cron": "^1.0.9","vue-echarts": "^4.0.1","vue-json-editor": "^1.2.3","vue-json-tree-view": "^2.1.4","vue-quill-editor": "3.0.6","vue-router": "^3.0.2","vuex": "^3.0.1"},"devDependencies": {"@vitejs/plugin-vue2": "2.3.1","benz-amr-recorder": "^1.0.14","chai": "^4.1.2","sass": "1.76","vite": "^4.5.3","vite-plugin-cdn-import": "^1.0.1","vue-template-compiler": "^2.6.10","vue-video-player": "^5.0.2"},"lint-staged": {"*.js": ["vue-cli-service lint","git add"],"*.vue": ["vue-cli-service lint","git add"]}
}

 

vite.config.js

/*** 配置参考:* https://cli.vuejs.org/zh/config/*/
import path from "path";
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue2";
import { Plugin as importToCDN } from "vite-plugin-cdn-import";const url = "http://to.youer.server:8090";
export default defineConfig({// 开发或生产环境服务的公共基础路径,用于指定项目中静态资源的基本路径base: "/",css: {preprocessorOptions: {scss: {api: "modern", // or 'modern'
      },},},optimizeDeps: {include: ["vue-cropper", "wangeditor"],},// 构建选项
  build: {target: "es2015",// 指定输出路径（相对于 项目根目录).outDir: "dist",// 指定生成静态资源的存放路径（相对于 build.outDir）。在 库模式 下不能使用。assetsDir: "static",// 构建后是否生成 source map 文件sourcemap: false,minify: "terser",terserOptions: {compress: {drop_console: true, //打包时删除consolepure_funcs: ["console.log"],drop_debugger: true, //打包时删除debugger
      },output: {comments: true, // 打包时删除注释
      },},},server: {open: true,disableHostCheck: true,port: 5186,host: "0.0.0.0",proxy: {"/api": {target: url,ws: false, // 需要websocket 开启changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ""),},// 3.5 以后不需要再配置
    },},resolve: {alias: [{find: /^~/,replacement: "",},{find: "@",replacement: path.resolve(__dirname, "src"),},],// 导入时想要省略的扩展名列表,默认值['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']// 官方文档中说：不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],},plugins: [Vue(),importToCDN({modules: [{name: "vue",var: "Vue",path: "https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js",},{name: "element-ui", // package.json 中依赖的名称,var: "ELEMENT", // 全局变量名，根据包里的变量设定，无法自定义path: "https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.min.js", // CDN 链接css: "https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.min.css", // 依赖有css就填，没有就去掉这个
        },],}),// ViteRequireContext(), // 亲测有效，兼容require.context// transformScss(), // 亲测有效，但是不推荐，建议全局替换deep// vueJsx()
  ],});