参考文章： 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 的作用了，配置如下：
import externalGlobals from "rollup-plugin-external-globals";
export default defineConfig({
build: {
rollupOptions: {
external: ["vue", "element-plus", "vue-demi"],
plugins: [
externalGlobals({
vue: "Vue",
"element-plus": "ElementPlus",
"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 也能正常工作。
|