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

参考文章： 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",
        }),
      ],
    },
  },
});

<!-- 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>

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

标签 , ,

发表回复