vue 打包后的文件（vite3 + vue3 + pinia 配置 CDN 后打包部署后出现 Failed to resolve module specifier “vue“ 报错处理）

时间2025-07-31 00:20:36分类IT科技浏览14979

导读：参考文章： pinia 踩坑总结报错分析...

参考文章： pinia 踩坑总结

报错分析

在项目中使用到了 pinia ，其中 vue 配置了 CDN ，开发环境下一切正常，部署后报了如下的错误：

Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

随后我关闭了 CDN ，再次部署，报错就没了，难道问题出在了 CDN 配置上？但是，当我继续使用 CDN ，通过配置 2 个不同的路由页面，一个页面使用了 pinia，另一个页面不使用 pinia 时，发现不使用 pinia 的页面是可以进行路由跳转的，使用了 pinia的页面依然报错导致路由无法跳转，所以问题应该还是在 pinia 上。

分析发现， pinia 源码中引入了 vue-demi 这个包，vue-demi 又引入了 vue，然而 rollup-plugin-external-globals 插件配置全局变量时不会处理 node_modules 下的依赖项，导致 vue-demi 还是通过 import 的方式与 node_modules 下的 vue 进行关联，而没有使用全局变量下的 vue ，打包后 vue 已变成外部依赖项，vue-demi 自然无法找到 vue ，所以就报了以上的错误。

而且，查看打包后的文件，发现居然还有 import xxx from vue 这样的代码存在，打包后根本不存在 vue ，这打包后的代码出大问题。

修改配置

要解决以上问题，只需要我们给 vue-demi 也配置 CDN ，这样就可以让 rollup-plugin-external-globals 影响到它，起到通知它也使用全局 vue 的作用了，配置如下：

// vite.config.ts // 👇 用于将外部导入转换为全局变量 👇 import externalGlobals from "rollup-plugin-external-globals"; export default defineConfig({ // other config build: { rollupOptions: { // 👇 告诉打包工具 "vue-demi" 也是外部依赖项 👇 external: ["vue", "element-plus", "vue-demi"], plugins: [ externalGlobals({ vue: "Vue", "element-plus": "ElementPlus", // 👇 配置 vue-demi 全局变量 👇 "vue-demi": "VueDemi", }), ], }, }, });  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vue.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus@2.2.12/dist/index.css"> <script src="//cdn.jsdelivr.net/npm/vue@3.2.37"></script>  <script src="//cdn.jsdelivr.net/npm/vue-demi@0.13.7"></script> <script src="//cdn.jsdelivr.net/npm/element-plus@2.2.12"></script> <title>Vite + Vue + TS</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html>

再次打包部署，这次就没有问题了，页面正常访问，pinia 也能正常工作。