From 23d658ef99411d8bb004fab4dc9a0f017f689d87 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 17 Aug 2025 15:09:18 +0800
Subject: [PATCH] fix:icon components not work when import cdn

---
 index.html     |  1 -
 package.json   |  2 +-
 pnpm-lock.yaml | 67 ++++++++------------------------------------------
 vite.config.ts | 42 ++++++++++++++++---------------
 4 files changed, 33 insertions(+), 79 deletions(-)

diff --git a/index.html b/index.html
index bf448cef..7357ac6f 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.png"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Type Words 练习英语</title>
-<!--    <script defer src="./s.js" data-website-id="160308c9-7900-4b1d-a0b1-c3b25a9530f6"></script>-->
     <script>
       ;(function () {
         var src = '//cdn.jsdelivr.net/npm/eruda';
diff --git a/package.json b/package.json
index 6797d224..39e3be87 100644
--- a/package.json
+++ b/package.json
@@ -87,8 +87,8 @@
     "unplugin-icons": "^22.2.0",
     "unplugin-vue-components": "^29.0.0",
     "unplugin-vue-macros": "^2.14.5",
+    "vite-plugin-externals": "^0.6.2",
     "vite": "^7.0.3",
-    "vite-plugin-cdn-import": "^1.0.1",
     "vue-tsc": "^3.0.1",
     "xlsx": "^0.18.5"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0bf796a7..9e00f579 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       string-comparison:
         specifier: ^1.3.0
         version: 1.3.0
+      vite-plugin-externals:
+        specifier: ^0.6.2
+        version: 0.6.2(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass@1.90.0))
       vue:
         specifier: ^3.5.17
         version: 3.5.18(typescript@5.9.2)
@@ -217,8 +220,8 @@ importers:
         specifier: ^7.0.3
         version: 7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass@1.90.0)
       vite-plugin-cdn-import:
-        specifier: ^1.0.1
-        version: 1.0.1(rollup@4.46.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass@1.90.0))
+        specifier: file:./plugins/vite-plugin-cdn-import/dist
+        version: dist@file:plugins/vite-plugin-cdn-import/dist
       vue-tsc:
         specifier: ^3.0.1
         version: 3.0.5(typescript@5.9.2)
@@ -833,15 +836,6 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.32':
     resolution: {integrity: sha512-QReCdvxiUZAPkvp1xpAg62IeNzykOFA6syH2CnClif4YmALN1XKpB39XneL80008UbtMShthSVDKmrx05N1q/g==}
 
-  '@rollup/pluginutils@5.2.0':
-    resolution: {integrity: sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-
   '@rollup/rollup-android-arm-eabi@4.46.2':
     resolution: {integrity: sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==}
     cpu: [arm]
@@ -1961,6 +1955,9 @@ packages:
     resolution: {integrity: sha512-glXVh42vz40yZb9Cq2oMOt70FIoWiv+vxNvdKdU8CwjLad25qHM3trLxhl9bVjdr6WaslIXhWpn0NO8T/67Qjg==}
     engines: {node: '>= 8.0.0'}
 
+  dist@file:plugins/vite-plugin-cdn-import/dist:
+    resolution: {directory: plugins/vite-plugin-cdn-import/dist, type: directory}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -2065,9 +2062,6 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
-  estree-walker@3.0.3:
-    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
-
   event-emitter@0.3.5:
     resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
 
@@ -2558,9 +2552,6 @@ packages:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
 
-  is-reference@3.0.3:
-    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
-
   is-relative@1.0.0:
     resolution: {integrity: sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==}
     engines: {node: '>=0.10.0'}
@@ -3252,11 +3243,6 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
-  rollup-plugin-external-globals@0.10.0:
-    resolution: {integrity: sha512-RXlupZrmn97AaaS5dWnktkjM+Iy+od0E+8L0mUkMIs3iuoUXNJebueQocQKV7Ircd54fSGGmkBaXwNzY05J1yQ==}
-    peerDependencies:
-      rollup: ^2.25.0 || ^3.3.0 || ^4.1.4
-
   rollup-plugin-visualizer@5.14.0:
     resolution: {integrity: sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==}
     engines: {node: '>=18'}
@@ -3795,9 +3781,6 @@ packages:
     resolution: {integrity: sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==}
     engines: {node: '>= 0.10'}
 
-  vite-plugin-cdn-import@1.0.1:
-    resolution: {integrity: sha512-lgjLxgwFSKvJLbqjVBirUZ0rQo00GpUGJzRpgQu8RyBw9LA7jaqG6fUMQzBC9qWmTGabPC3iOzwCcoi7PseRAQ==}
-
   vite-plugin-externals@0.6.2:
     resolution: {integrity: sha512-R5oVY8xDJjLXLTs2XDYzvYbc/RTZuIwOx2xcFbYf+/VXB6eJuatDgt8jzQ7kZ+IrgwQhe6tU8U2fTyy72C25CQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -4607,14 +4590,6 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.32': {}
 
-  '@rollup/pluginutils@5.2.0(rollup@4.46.2)':
-    dependencies:
-      '@types/estree': 1.0.8
-      estree-walker: 2.0.2
-      picomatch: 4.0.3
-    optionalDependencies:
-      rollup: 4.46.2
-
   '@rollup/rollup-android-arm-eabi@4.46.2':
     optional: true
 
@@ -5937,6 +5912,8 @@ snapshots:
 
   digest-header@1.1.0: {}
 
+  dist@file:plugins/vite-plugin-cdn-import/dist: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -6068,10 +6045,6 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
-  estree-walker@3.0.3:
-    dependencies:
-      '@types/estree': 1.0.8
-
   event-emitter@0.3.5:
     dependencies:
       d: 1.0.2
@@ -6634,10 +6607,6 @@ snapshots:
 
   is-plain-object@5.0.0: {}
 
-  is-reference@3.0.3:
-    dependencies:
-      '@types/estree': 1.0.8
-
   is-relative@1.0.0:
     dependencies:
       is-unc-path: 1.0.0
@@ -7349,14 +7318,6 @@ snapshots:
 
   rfdc@1.4.1: {}
 
-  rollup-plugin-external-globals@0.10.0(rollup@4.46.2):
-    dependencies:
-      '@rollup/pluginutils': 5.2.0(rollup@4.46.2)
-      estree-walker: 3.0.3
-      is-reference: 3.0.3
-      magic-string: 0.30.17
-      rollup: 4.46.2
-
   rollup-plugin-visualizer@5.14.0(rollup@4.46.2):
     dependencies:
       open: 8.4.2
@@ -8006,14 +7967,6 @@ snapshots:
       remove-trailing-separator: 1.1.0
       replace-ext: 1.0.1
 
-  vite-plugin-cdn-import@1.0.1(rollup@4.46.2)(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass@1.90.0)):
-    dependencies:
-      rollup-plugin-external-globals: 0.10.0(rollup@4.46.2)
-      vite-plugin-externals: 0.6.2(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass@1.90.0))
-    transitivePeerDependencies:
-      - rollup
-      - vite
-
   vite-plugin-externals@0.6.2(vite@7.1.2(@types/node@24.3.0)(jiti@2.5.1)(sass@1.90.0)):
     dependencies:
       acorn: 8.15.0
diff --git a/vite.config.ts b/vite.config.ts
index 2f88a223..0400f4aa 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,16 +7,17 @@ import SlidePlugin from './src/components/slide/data.js';
 import {getLastCommit} from "git-last-commit";
 import UnoCSS from 'unocss/vite'
 import VueMacros from 'unplugin-vue-macros/vite'
-import cdn from 'vite-plugin-cdn-import'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
 import IconsResolver from 'unplugin-icons/resolver'
+import {viteExternalsPlugin} from 'vite-plugin-externals'
 
 function pathResolve(dir: string) {
   return resolve(__dirname, ".", dir)
 }
 
 const lifecycle = process.env.npm_lifecycle_event;
+let isBuild = ['build', 'report'].includes(lifecycle)
 
 // https://vitejs.dev/config/
 export default defineConfig(() => {
@@ -55,29 +56,30 @@ export default defineConfig(() => {
               open: true //如果存在本地服务端口，将在打包后自动展示
             }) : null,
           SlidePlugin(),
-          ['build', 'report'].includes(lifecycle) ? cdn({
-            modules: [
-              {
-                name: 'vue',
-                var: 'Vue',
-                path: `https://2study.top/vue.global.prod.min.js`
+          isBuild ? [
+            //这里不要用vite-plugin-cdn-import，他里面使用了rollup-plugin-external-globals插件，会导致自动加载components.d.ts里面的组件全部没引入，也不报错
+            {
+              name: 'inject-cdn-head',
+              enforce: 'pre',
+              transformIndexHtml(html) {
+                const scripts = `
+<script src="https://2study.top/vue.global.prod.min.js" crossorigin="anonymous"></script>
+<script src="https://2study.top/vue-router.global.prod.min.js" crossorigin="anonymous"></script>
+<script src="https://2study.top/axios.min.js" crossorigin="anonymous"></script>
+`
+                return html.replace('<head>', `<head>${scripts}`)
               },
-              {
-                name: 'vue-router',
-                var: 'VueRouter',
-                path: `https://2study.top/vue-router.global.prod.min.js`
-              },
-              {
-                name: 'axios',
-                var: 'axios',
-                path: 'https://2study.top/axios.min.js'
-              },
-            ],
-          }) : null
+            },
+            viteExternalsPlugin({
+              vue: 'Vue',
+              'vue-router': 'VueRouter',
+              axios: 'axios',
+            })
+          ] : null,
         ],
         build: {
           rollupOptions: {
-            external: ['build', 'report'].includes(lifecycle) ? ['axios'] : [],// 使用全局的 axios。因为百度翻译库内部用了0.19版本的axios，会被打包到代码里面
+            external: isBuild ? ['axios'] : [],// 使用全局的 axios。因为百度翻译库内部用了0.19版本的axios，会被打包到代码里面
           }
         },
         define: {