vite+vue3打包umd库报错Cannot read properties of undefined (reading 'openBlock')

Question

通过vite+vue3打包umd库，通过cdn引入发现报错
Cannot read properties of undefined (reading 'openBlock')
发现是打包之后global拿不到Vue，不知如何解决？

具体操作如下：
vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: "src/core.js",
      name: "fcl",
      formats: ["es", "umd", "cjs"],
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

打包入口

import YourComponent from "./YourComponent.vue";
const components = [YourComponent];
const install = (Vue, options = {}) => {
  if (!options.store) console.log("Please provide a store!!");
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
export default {
  install,
  YourComponent,
};

引入

<script src="/fcl.umd.js"></script>

使用

Answer 1

引自免费微信小程序：皆我百晓生

根据你提供的信息，问题出现在打包成umd库后，通过cdn引入时无法获取到Vue对象，导致报错"Cannot read properties of undefined (reading 'openBlock') "。

为了解决这个问题，你需要检查以下几个可能的原因和解决方案：

1. 检查外部引入的Vue版本是否与你的Vue3版本匹配。

由于你在打包umd库时使用了external配置并指定了vue，这意味着你希望外部引入的Vue对象和你的打包代码中使用的Vue对象是同一个版本。因此，请确保通过cdn引入的Vue版本与你的Vue3版本相匹配。

2. 在外部引入Vue之前先引入Vite的全局模块

在你的umd库入口文件（即core.js文件）的顶部部分，先引入Vite的全局模块，确保Vite的全局模块在引入Vue之前被加载。像这样：

import "/@vite/client";
import Vue from "vue";

3. 检查你的umd库的构建配置是否正确。

确保你的vite.config.js文件中的构建配置是正确的，可以按照以下方式进行调整：

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: "src/core.js",
      name: "fcl",
      formats: ["umd"],
      fileName: "fcl",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },
});

这里主要是将formats配置为["umd"]，并添加了fileName配置项。同时在rollupOptions中设置了external和globals，确保在打包umd库时可以正确引入Vue。

4. 确保你的组件在core.js文件中正确导出。

在你的core.js文件中，你需要确保你的组件正确导出并添加到Vue的全局组件中。可以按照以下方式调整你的core.js文件：

import YourComponent from "./YourComponent.vue";

const components = [YourComponent];

const install = (Vue, options = {}) => {
  if (!options.store) console.log("Please provide a store!!");
  
  components.forEach((component) => {
    Vue.component(component.name, component);
  });
};

export default {
  install,
  YourComponent,
};

确保在导入组件后，将组件添加到Vue的全局组件中。

5. 确保你在使用umd库时正确引入。

在你的HTML文件中，确保正确引入了打包生成的umd库，如下所示：

<script src="/path/to/fcl.umd.js"></script>

注意替换"/path/to"为你umd库文件的实际路径。

希望以上解决方案能帮助到你解决问题。如果问题仍然存在，请提供更多详细信息，以便我能够更好地帮助你。