Vue CLI 可以为 Vue 3 构建一个库吗？答案

【问题标题】：Can Vue CLI build a library for Vue 3?Vue CLI 可以为 Vue 3 构建一个库吗？
【发布时间】：2021-10-26 07:31:34
【问题描述】：

我想使用 Vue CLI 构建一个 Vue 库。该项目更喜欢构建库而不是完全构建的应用程序。库构建工作，但库不能与 Vue 3 结合使用。让我详细说明...

首先创建一个简单的 Vue 3 应用程序。类似命令vue create 的构建。然后使用以下命令构建库：

vue build App.vue -t lib

这会产生一些编译文件，其中之一是App.umd.js。使用 Vue 2 和以下初始化代码时，它工作正常。

<body>
  <div id="app">
    <demo></demo>
  </div>
  <script src="https://unpkg.com/vue@2"></script>
  <script src="./dist/App.umd.js"></script>
  <script>
    
    new Vue({
      components: {
        demo: App
      }
    }).$mount('#app')
  
  </script>

</body>

但是当使用 Vue 3 和下面的 init 代码时，会导致 JavaScript 错误。

<body>
  <div id="app">
    <demo></demo>
  </div>
  <script src="https://unpkg.com/vue@3"></script>
  <script src="./dist/App.umd.js"></script>
  <script>

    Vue.createApp({
      components: {
        demo: App
      }
    }).mount('#app')
  
  </script>

</body>

JavaScript 错误是：

Uncaught TypeError: Cannot read property '_c' of undefined
at Proxy.render (App.vue?19ce:1)

我假设 Vue CLI 应该能够为 Vue 3 构建一个库。这可以实现吗？

我使用@vue/cli 4.5.13，这是撰写本文时最新的版本。

【问题讨论】：

标签： vue.js vuejs3 vue-cli vue-cli-4

【解决方案1】：

我假设您在 Vue 2 和 Vue 3 应用程序中使用相同的 Vue 2 库。因此，当您尝试在 Vue 2 应用程序中使用 Vue 2 库时，它可以工作，但是当您尝试在 Vue 3 应用程序中使用 Vue 2 库时，它就不起作用了？

Vue 3 与 Vue 2 不反向兼容，这就是原因。

您需要使用 Vue 3 构建库才能在 Vue 3 应用程序中使用它。

你也可以试试https://www.npmjs.com/package/vue-demi

【讨论】：

这就是为什么我问 Vue CLI 如何为 Vue 3 构建一个库。