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

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

imtanqin

20789人浏览 · 2022-08-14 00:34:42

imtanqin · 2022-08-14 00:34:42 发布

参考文章： 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>