vite4+vue3cdn打包vue访问问题

Question

关于cdn 引入 vue 问题，项目使用了 unplugin-auto-import 自动引入插件，

打包后报错：

报错内容： Uncaught (in promise) TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

cdn 打包场景：

//利用vite-plugin-cdn-import

viteCDNPlugin({
      modules: [
        {
          name: "vue",
          var: "Vue",
          path: "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.global.prod.min.js",
        },
      ]
})

//部分rollup配置

rollupOptions: {
      external: ["element-plus", 'echarts', 'vue','vue-demi'],
      plugins: [
        commonjs(),
        externalGlobals({
          vue: "Vue",
          "element-plus": "ElementPlus",
          'echarts': 'echarts',
          // 'xlsx': 'xlsx'
          // 👇 配置 vue-demi 全局变量 👇
          "vue-demi": "VueDemi",
          // 'vue-router': 'VueRouter',
          // 'pinia': 'pinia',
          // 'axios':'axios'
        }),
      ],
      output: { //静态资源分类打包
        format: 'es',
        globals: {
          vue: 'Vue',
          // 'vue-router': 'VueRouter',
        },
}

版本环境
"vite": "^4.0.0",
"unplugin-auto-import": "^0.12.1"
"vue": "^3.2.45",

寄语：我用尽了这三年来的搜索功力，实在没有解决，但是cdn优化势在必行。有vue+vite构建经验的朋友，望拔刀相助，不胜感激。

Answer 1

参考GPT和自己的思路，根据错误提示 "Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../""，你的代码尝试使用了相对引用来导入 Vue 模块，但是该模块不在当前的相对路径中。这可能是由于 unplugin-auto-import 插件自动引入 Vue 模块而不是使用 CDN 的原因，因此可以尝试禁用该插件或者调整其配置。

如果你已经在使用 CDN，可以直接从 CDN 引入 Vue，而不需要使用 unplugin-auto-import。具体来说，你可以通过以下方式从 CDN 引入 Vue：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.global.prod.min.js"></script>

这里假设你使用的是全局引入版本的 Vue，如果你使用的是单文件组件版本的 Vue，则需要在代码中进行相应的修改。

如果你想继续使用 unplugin-auto-import 插件，你需要调整其配置，以确保它不会自动引入 Vue 模块，而是使用从 CDN 引入的全局 Vue。你可以在 unplugin-auto-import 插件的配置中添加如下内容：

autoImport: {
  // ...
  imports: {
    // ...
    vue: {
      // 禁用自动引入
      disabled: true,
      // 手动引入全局 Vue
      // 这里假设你使用的是全局引入版本的 Vue
      default: 'Vue',
      path: 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.45/vue.global.prod.min.js',
    },
  },
},

这样配置后，unplugin-auto-import 将不再自动引入 Vue 模块，而是使用全局变量 Vue。如果你使用的是单文件组件版本的 Vue，则需要将 default 属性修改为相应的值。