使用vite-plugin-cdn-import启用报错： Cannot read properties of undefined (reading 'css')

vite.config.js 文件：

import { fileURLToPath, URL } from 'node:url'
import viteCompression from 'vite-plugin-compression'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import importToCDN from "vite-plugin-cdn-import";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'



// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    viteCompression({
      filter: /.(js|css|html|json|mjs|png|jpg|jpeg|svg)$/i
    }),
    importToCDN({
      modules: [...CDN.css, ...CDN.js],
    })
  ],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})




// CDN外链，会插入到index.html中
const CDN = {
  css: [
    // name：表示模块的名称 var：表示模块在全局作用域中的变量名，如果该属性未指定，则默认使用模块的名称作为变量名。path：表示模块在CDN中的路径。
    {
      // name: "***",
      // var: "***",
      path: "https://unpkg.com/animate.css@4.1.1",
    },
    {
      path: "https://unpkg.com/bootstrap@5.3.1/dist/css/bootstrap.min.css",
    },
    {
      path: "https://unpkg.com/bootstrap-icons@1.10.0/font/bootstrap-icons.css",
    }
  ],
  js: [
    {
      path: "https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.min.js",
    },
    {
      path: "https://unpkg.com/bootstrap@5.3.1/dist/js/bootstrap.min.js",
    }
  ]
};

启动就报错：

img


启动不了

用ejs的方式引入得了

【以下回答由 GPT 生成】

问题分析： 根据问题的描述，使用vite-plugin-cdn-import时报错"Cannot read properties of undefined (reading 'css')"。根据代码，问题出现在importToCDN引入的modules数组定义上，没有包含CSS相关的配置。

解决方案： 为了解决该问题，需要在vite.config.js文件中正确配置importToCDN插件的modules属性，包括合适的CSS配置。

  1. 首先，我们需要将定义模块的CDN对象放在plugins数组之前，使其能够在其它插件中被引用到。
const CDN = {
  css: [
    {
      // name: "***",
      // var: "***",
      path: "https://unpkg.com/animate.css@4.1.1",
    },
    {
      path: "https://unp
  1. 然后，在plugins数组中的importToCDN插件配置中，将modules属性的值修改为正确的CDN配置数组，包含先前定义的CDN对象中的css属性。
importToCDN({
  modules: [...CDN.css, ...CDN.js],
})

完整代码如下：

import { fileURLToPath, URL } from 'node:url';
import viteCompression from 'vite-plugin-compression';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import importToCDN from "vite-plugin-cdn-import";
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// CDN外链，会插入到index.html中
const CDN = {
  css: [
    {
      // name: "***",
      // var: "***",
      path: "https://unpkg.com/animate.css@4.1.1",
    },
    {
      path: "https://unp

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    viteCompression({
      filter: /.(js|css|html|json|mjs|png|jpg|jpeg|svg)$/i
    }),
    importToCDN({
      modules: [...CDN.css, ...CDN.js],
    })
  ],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

这样，我们应该可以成功修复"Cannot read properties of undefined (reading 'css')"的报错。

但是需要注意的是，由于信息不完整，如缺失的CDN配置，仍然会导致代码片段不完整。这可能会影响最终的解决方案。在真实的开发环境中，请确保提供完整的代码和详细的错误信息以供更准确的问题解决方案。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

把你的CDN放在前面，不能放在末尾

img