惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
Engineering at Meta
Engineering at Meta
D
DataBreaches.Net
月光博客
月光博客
Recent Announcements
Recent Announcements
Google DeepMind News
Google DeepMind News
U
Unit 42
腾讯CDC
爱范儿
爱范儿
J
Java Code Geeks
有赞技术团队
有赞技术团队
Blog — PlanetScale
Blog — PlanetScale
N
Netflix TechBlog - Medium
B
Blog
Stack Overflow Blog
Stack Overflow Blog
GbyAI
GbyAI
T
The Blog of Author Tim Ferriss
小众软件
小众软件
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Y
Y Combinator Blog
大猫的无限游戏
大猫的无限游戏
Microsoft Azure Blog
Microsoft Azure Blog
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知

博客园 - 前端小小菜

本地 Android 设备长期在线 + 云服务器对外提供签名接口(可落地方案) Got minus one from a read call, connect lapse 夸克等网盘作为小爱音源方案 QQ幻想开心辞典答题器,自动答题器《FO回忆》 avue的一些踩坑记录 captcha-trainer运行环境使用腾讯云十分钟搭建教程 关于宝塔会自动上传网站访问数据的问题 charles for centos 实现map local/map remote功能 nfc reader iso-7816 读卡器参考资料 博文阅读密码验证 - 博客园 win7 移动用户目录的mklink命令 mac下electron打包exe 出现白屏问题的记录 小米路由器3G 刷openwrt并安装cups一拖多台打印机攻略 husky7 + eslint +prettier配置vue2.x 开发环境 苹果与安卓万年不改的臭毛病 哪个城市更容易考上好大学——全国各省历年中考高考升学率统计 哈哈哈, 腾讯云服务器被黑 sketch相关 vue ssr 若干问题整理(基于easywebpack)
pigx 改造升级vite,webpack+vue2 升级 vite+vue2 记录
前端小小菜 · 2024-10-18 · via 博客园 - 前端小小菜

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

本文做一个记录。

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

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

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

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

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

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

额外的,我们很大概率为了优化首屏加载速度,可能会用到 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