feat: 添加打包是否启动`cdn`替换本地库配置，默认`false`不启动

.env.production

@@ -8,4 +8,7 @@ VITE_ROUTER_HISTORY = "hash"
 VITE_PROXY_DOMAIN_REAL = ""
 
 # 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
-VITE_LEGACY = false
+VITE_LEGACY = false
+
+# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
+VITE_CDN = false

.env.staging

@@ -12,3 +12,6 @@ VITE_PROXY_DOMAIN_REAL = ""
 
 # 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
 VITE_LEGACY = false
+
+# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
+VITE_CDN = false

build/cdn.ts

@@ -0,0 +1,67 @@
+import { Plugin as importToCDN } from "vite-plugin-cdn-import";
+
+/**
+ * @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
+ * 平台采用国内cdn：https://www.bootcdn.cn，当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
+ * 提醒：mockjs不能用cdn模式引入，会报错。正确的方式是，生产环境删除mockjs，使用真实的后端请求
+ * 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
+ */
+export const cdn = importToCDN({
+  //（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path）
+  prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}",
+  modules: [
+    {
+      name: "vue",
+      var: "Vue",
+      path: "vue.global.prod.min.js"
+    },
+    {
+      name: "vue-router",
+      var: "VueRouter",
+      path: "vue-router.global.min.js"
+    },
+    {
+      name: "vue-i18n",
+      var: "VueI18n",
+      path: "vue-i18n.runtime.global.prod.min.js"
+    },
+    // 项目中没有直接安装vue-demi，但是pinia用到了，所以需要在引入pinia前引入vue-demi（https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77）
+    {
+      name: "vue-demi",
+      var: "VueDemi",
+      path: "index.iife.min.js"
+    },
+    {
+      name: "pinia",
+      var: "Pinia",
+      path: "pinia.iife.min.js"
+    },
+    {
+      name: "element-plus",
+      var: "ElementPlus",
+      path: "index.full.min.js",
+      css: "index.min.css"
+    },
+    {
+      name: "axios",
+      var: "axios",
+      path: "axios.min.js"
+    },
+    {
+      name: "dayjs",
+      var: "dayjs",
+      path: "dayjs.min.js"
+    },
+    {
+      name: "echarts",
+      var: "echarts",
+      path: "echarts.min.js"
+    },
+    {
+      name: "lodash",
+      var: "lodash",
+      // 可写`完整路径`，会替换`prodUrl`
+      path: "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"
+    }
+  ]
+});

build/index.ts

@@ -7,7 +7,8 @@ const warpperEnv = (envConf: Recordable): ViteEnv => {
     VITE_PROXY_DOMAIN: "",
     VITE_PROXY_DOMAIN_REAL: "",
     VITE_ROUTER_HISTORY: "",
-    VITE_LEGACY: false
+    VITE_LEGACY: false,
+    VITE_CDN: false
   };
 
   for (const envName of Object.keys(envConf)) {

build/plugins.ts

@@ -1,3 +1,4 @@
+import { cdn } from "./cdn";
 import { resolve } from "path";
 import vue from "@vitejs/plugin-vue";
 import { viteBuildInfo } from "./info";
@@ -12,7 +13,11 @@ import themePreprocessorPlugin from "@pureadmin/theme";
 import { genScssMultipleScopeVars } from "/@/layout/theme";
 import DefineOptions from "unplugin-vue-define-options/vite";
 
-export function getPluginsList(command, VITE_LEGACY) {
+export function getPluginsList(
+  command: string,
+  VITE_LEGACY: boolean,
+  VITE_CDN: boolean
+) {
   const prodMock = true;
   const lifecycle = process.env.npm_lifecycle_event;
   return [
@@ -25,6 +30,7 @@ export function getPluginsList(command, VITE_LEGACY) {
     }),
     // jsx、tsx语法支持
     vueJsx(),
+    VITE_CDN ? cdn : null,
     DefineOptions(),
     // 线上环境删除console
     removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),

package.json

@@ -147,6 +147,7 @@
     "typescript": "^4.7.4",
     "unplugin-vue-define-options": "0.7.3",
     "vite": "^3.1.8",
+    "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-remove-console": "^1.1.0",
     "vite-svg-loader": "^3.6.0",

pnpm-lock.yaml

@@ -105,6 +105,7 @@ specifiers:
   unplugin-vue-define-options: 0.7.3
   v-contextmenu: 3.0.0
   vite: ^3.1.8
+  vite-plugin-cdn-import: ^0.3.5
   vite-plugin-mock: ^2.9.6
   vite-plugin-remove-console: ^1.1.0
   vite-svg-loader: ^3.6.0
@@ -244,6 +245,7 @@ devDependencies:
   typescript: 4.8.4
   unplugin-vue-define-options: 0.7.3_vite@3.1.8+vue@3.2.40
   vite: 3.1.8_sass@1.55.0+terser@5.15.1
+  vite-plugin-cdn-import: 0.3.5
   vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@3.1.8
   vite-plugin-remove-console: 1.1.0
   vite-svg-loader: 3.6.0
@@ -5521,6 +5523,15 @@ packages:
       }
     engines: { node: ">=0.10.0" }
 
+  /is-reference/1.2.1:
+    resolution:
+      {
+        integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
+      }
+    dependencies:
+      "@types/estree": 0.0.39
+    dev: true
+
   /is-regexp/1.0.0:
     resolution:
       {
@@ -7538,6 +7549,23 @@ packages:
       glob: 7.2.3
     dev: true
 
+  /rollup-plugin-external-globals/0.6.1:
+    resolution:
+      {
+        integrity: sha512-mlp3KNa5sE4Sp9UUR2rjBrxjG79OyZAh/QC18RHIjM+iYkbBwNXSo8DHRMZWtzJTrH8GxQ+SJvCTN3i14uMXIA==
+      }
+    peerDependencies:
+      rollup: ^2.25.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      "@rollup/pluginutils": 4.2.1
+      estree-walker: 2.0.2
+      is-reference: 1.2.1
+      magic-string: 0.25.9
+    dev: true
+
   /rollup-plugin-visualizer/5.8.2:
     resolution:
       {
@@ -8697,6 +8725,17 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /vite-plugin-cdn-import/0.3.5:
+    resolution:
+      {
+        integrity: sha512-e1raoalfBiIhv+hnMeSp1UNjloDDBhHpeFxkwRRdPBmTdDRqdEEn8owUmT5u8UBSVCs4xN3n/od4a91vXEhXPQ==
+      }
+    dependencies:
+      rollup-plugin-external-globals: 0.6.1
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /vite-plugin-mock/2.9.6_mockjs@1.1.0+vite@3.1.8:
     resolution:
       {

types/global.d.ts

@@ -81,6 +81,7 @@ declare global {
     VITE_PROXY_DOMAIN_REAL: string;
     VITE_ROUTER_HISTORY: string;
     VITE_LEGACY: boolean;
+    VITE_CDN: boolean;
   }
 
   declare interface ServerConfigs {

vite.config.ts

@@ -27,6 +27,7 @@ const __APP_INFO__ = {
 
 export default ({ command, mode }: ConfigEnv): UserConfigExport => {
   const {
+    VITE_CDN,
     VITE_PORT,
     VITE_LEGACY,
     VITE_PUBLIC_PATH,
@@ -59,7 +60,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
             }
           : null
     },
-    plugins: getPluginsList(command, VITE_LEGACY),
+    plugins: getPluginsList(command, VITE_LEGACY, VITE_CDN),
     optimizeDeps: {
       include: ["pinia", "vue-i18n", "lodash-es", "@vueuse/core", "dayjs"],
       exclude: ["@pureadmin/theme/dist/browser-utils"]