pigx 改造升级vite，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, //打包时删除console
        pure_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()
  ],

});

 其他

修复路由控制台警告问题

// this.safe.$router.addRoutes(aRouter)
aRouter.forEach(r => this.safe.$router.addRoute(r))    

 

动态路由导入 require 不支持问题

const viewComs = import.meta.glob('@/views/**/**/*.vue')

// require([`../${component}.vue`], resolve)
return viewComs[`/src/${component}.vue`] && (await viewComs[`/src/${component}.vue`]()).default