Vite中使用vite-plugin-cdn-import导入依赖失败及配置咨询

一、先修正配置中的明显错误 #

你的vite-plugin-cdn-import配置存在两个直接导致报错的问题：

1. Vue的CDN路径写错为axios的链接，完全无法加载Vue资源
2. XLSX使用了cpexcel.min.js，这是XLSX的辅助计算文件，并非主库文件

二、各依赖的正确CDN配置 #

以下是匹配你导入方式的完整正确配置：

import { createImportPlugin } from 'vite-plugin-cdn-import'
export default defineConfig({
  plugins: [
    createImportPlugin({
      modules: [
        // axios（原配置无需修改）
        {
          name: 'axios',
          var: 'axios',
          path: 'https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js'
        },
        // XLSX 修正主文件与全局变量
        {
          name: 'xlsx',
          var: 'XLSX', // 全局变量为大写XLSX，而非小写xlsx
          path: 'https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js'
        },
        // jquery（原配置无需修改）
        {
          name: 'jquery',
          var: '$',
          path: 'https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js'
        },
        // d3（原配置无需修改）
        {
          name: 'd3',
          var: 'd3',
          path: 'https://cdn.bootcdn.net/ajax/libs/d3/4.5.0/d3.min.js'
        },
        // save-svg-as-png（原变量配置正确，路径无需修改）
        {
          name: 'save-svg-as-png',
          var: 'saveSvgAsPng',
          path: 'https://cdn.bootcdn.net/ajax/libs/save-svg-as-png/1.4.17/saveSvgAsPng.min.js'
        },
        // Vue 修正路径与全局变量
        {
          name: 'vue',
          var: 'Vue', // Vue3 UMD包暴露的全局变量为Vue，而非小写vue
          path: 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.prod.js'
        },
        // Element-Plus 补充样式CDN，组件库必须加载样式文件
        {
          name: 'element-plus',
          var: 'ElementPlus',
          path: 'https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.7/index.full.min.js',
          css: 'https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.7/index.min.css'
        },
      ]
    })
  ]
})

三、name与var的填写规则 #

• name：必须和package.json中的依赖名称、代码中import的包名完全一致（比如import { ElMessage } from 'element-plus'中的element-plus）
• var：对应CDN脚本在浏览器全局环境中暴露的变量名，可通过两种方式确认：
  1. 查看该库的官方CDN文档，通常会明确说明全局变量名称
  2. 直接打开CDN链接，查看代码末尾的window.XXX赋值语句，XXX就是var需要填的值

四、解决importToCDN is not a function报错 #

你使用的vite-plugin-cdn-import@0.3.5版本已将默认导出改为createImportPlugin，而非旧版本的importToCDN。只需修改导入方式为：

import { createImportPlugin } from 'vite-plugin-cdn-import'

再用createImportPlugin替代原代码中的importToCDN即可解决该错误。

五、额外注意事项 #

1. Element-Plus必须配置css字段引入CDN样式，否则组件会丢失样式
2. Vue的CDN包需选择UMD格式（如vue.global.prod.js），不能使用ES模块格式的包
3. 解构导入（如import { ref, reactive } from 'vue'）会自动映射到全局变量的属性（如Vue.ref），无需额外配置
4. 测试时可打开浏览器控制台，检查网络请求是否加载了所有CDN脚本，同时验证全局变量是否存在（如输入Vue、XLSX查看输出）

内容的提问来源于stack exchange，提问作者pyvadev