feat: 支持生产环境打包 cdn 加速

.env.production

@@ -1,5 +1,8 @@
 # baseUrl 
-VITE_BASE_API = '/'
+VITE_BASE_API = "/"
 
 # 线上环境平台打包路径
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = "/"
+
+# 生产环境是否启用 cdn
+VITE_CDN_DEPS = "false"

README.md

@@ -39,7 +39,7 @@
 - [x] ESLint
 - [x] 首屏加载动画
 - [x] 开发环境调试面板
-- [ ] TODO: 生产环境 CDN 依赖
+- [x] 生产环境 CDN 依赖
 
 **主分支默认 TypeScript，如果你希望使用的是 JavaScript 语言，请切换 [js-version](https://github.com/yulimchen/vue3-h5-template/tree/js-version) 分支进行开发**
 
@@ -260,13 +260,9 @@ feat(layout): 布局完成
 
 
 
-### - <span id="CDN">CDN 生产环境依赖(TODO)</span>
+### - <span id="CDN">CDN 生产环境依赖</span>
 
-本模板生产环境默认 CDN 加载依赖，依赖加载源见根目录 `dependencies-cdn.js` 文件。
-
-**❗ PS.为避免打包后出现不可预估问题，请注意确保生产和开发环境的依赖版本一致！**
-
-> 如需关闭 CDN 依赖，在根目录生产环境变量文件 `.env.production` 中修改 `VUE_APP_CDN_DEPS` 的值为 `false` ，重新打包即可。
+本模板生产环境默认不开启 CDN 加载依赖，如需开启生产环境加载 CDN 依赖，在根目录生产环境变量文件 `.env.production` 中修改 `VITE_CDN_DEPS` 的值为 `true` 重新打包即可。
 
 
 

build/cdn.ts

@@ -0,0 +1,12 @@
+import { cdn } from "vite-plugin-cdn2";
+
+export function enableCDN(isEnabled: string) {
+  if (isEnabled === "true") {
+    return cdn({
+      // url 可以更换为私有或其他源
+      // url: "https://cdn.jsdelivr.net/npm/",
+      url: "https://unpkg.com/",
+      modules: ["vue", "vue-demi", "pinia", "axios", "vant", "vue-router"]
+    });
+  }
+}

package.json

@@ -59,6 +59,7 @@
     "typescript": "~5.2.2",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.5.0",
+    "vite-plugin-cdn2": "^0.15.2",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock-dev-server": "^0.3.21",

tsconfig.json

@@ -6,7 +6,8 @@
     "src/**/*.tsx", 
     "src/**/*.vue", 
     "types/*.d.ts",
-    "vite.config.ts"
+    "vite.config.ts",
+    "build/**/*.ts",
   ],
   "exclude": [
     "node_modules",

vite.config.ts

@@ -10,6 +10,7 @@ import mockDevServerPlugin from "vite-plugin-mock-dev-server";
 import vueSetupExtend from "vite-plugin-vue-setup-extend";
 import viteCompression from "vite-plugin-compression";
 import { createHtmlPlugin } from "vite-plugin-html";
+import { enableCDN } from "./build/cdn";
 
 // 当前工作目录路径
 const root: string = process.cwd();
@@ -47,7 +48,9 @@ export default defineConfig(({ mode }) => {
             ENABLE_ERUDA: env.VITE_ENABLE_ERUDA || "false"
           }
         }
-      })
+      }),
+      // 生产环境默认不启用 CDN 加速
+      enableCDN(env.VITE_CDN_DEPS)
     ],
     resolve: {
       alias: {