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 也能正常工作。