fix:icon components not work when import cdn

2025-08-17 15:09:18 +08:00
parent e07a86565e
commit 23d658ef99
4 changed files with 33 additions and 79 deletions
--- 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';
--- 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"
  },
--- 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
--- 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: {