vite4+vue3cdn打包vue访问问题
关于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构建经验的朋友，望拔刀相助，不胜感激。
参考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 属性修改为相应的值。
该回答引用ChatGPT
根据报错信息，似乎是在自动引入插件的过程中，未能正确识别 Vue 模块的导入路径，导致在打包后无法正确解析 Vue 模块。
这可能与 unplugin-auto-import 插件本身的配置有关。建议检查 unplugin-auto-import 插件的配置，确保它正确地配置了 Vue 模块的导入路径。
同时，由于你使用了 viteCDNPlugin，需要在 rollup 的配置中正确设置 external 和 globals，以确保 Vue 模块的引入正确地指向 CDN 资源。
可以尝试在 rollup 的配置中，将 external 设置为 ["vue"]，将 globals 设置为 { vue: "Vue" }。这样可以告诉 rollup 在打包时不要将 Vue 打包进去，而是直接使用 CDN 引入的 Vue。
例如：
export default {
// ...
build: {
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue"
}
}
}
}
}
该回答引用GPTᴼᴾᴱᴺᴬᴵ
根据报错信息，提示无法解析模块规范符号 "vue"，可能是因为使用了 CDN 引入 Vue，而自动引入插件使用了 ES 模块的 import 语法。
-
可以尝试在自动引入插件中配置 Vue 的全局变量名，使其能够在 ES 模块中被正确引用。根据你提供的部分 rollup 配置，似乎已经配置了 Vue 的全局变量名为 "Vue"，应该不是这个问题。
-
另外，根据你提供的代码，看起来使用了 Vite 作为构建工具，但同时也提供了部分 Rollup 配置。如果你的项目中同时使用了 Vite 和 Rollup 进行构建，需要确保它们的配置是一致的，否则可能会出现不兼容的问题。
这么难吗这条路，来个大佬呀
根据报错信息来看，可能是因为在使用cdn引入vue的时候，由于vue的路径不是以"/", "./", 或 "../"开头，所以无法识别vue的路径。解决这个问题有以下几种方法：
将unplugin-auto-import插件中的vue引入相关配置修改为cdn路径。具体来说，可以在配置文件中添加如下代码：
javascript
Copy code
// vite.config.js
export default {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('my-')
}
}
}),
AutoImport({
imports: ['vue'],
dts: 'src/auto-imports.d.ts',
resolvers: [
{
match: /\/vue$/,
id: () => 'vue/dist/vue.esm-bundler.js',
},
],
}),
// ...
],
};
在项目中直接引入vue的cdn地址，而不是使用unplugin-auto-import插件自动引入。可以在index.html文件中添加如下代码：
html
Copy code
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My App</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.5/dist/vue.esm-browser.js"></script>
<!-- ... -->
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
以上两种方法都可以解决cdn引入vue时报错的问题。如果您仍然无法解决问题，可以提供更多错误信息和代码细节，以便更好地进行排查。