参考文章：
报错分析
crm开发定制在项目中使用到了 pinia ，其中 vue 配置了 CDN，crm开发定制开发环境下一切正常，crm开发定制部署后报了如下的错误：
Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".- 1
随后我关闭了 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", }), ], }, },});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
<!-- index.html --><!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> <!-- 👇 添加 vue-demi 的 CDN 地址 👇 --> <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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
再次打包部署，这次就没有问题了，页面正常访问，pinia 也能正常工作。