Vue CLI 可以为 Vue 3 构建库吗？

Question

I would like to build a Vue library using Vue CLI.我想使用 Vue CLI 构建一个 Vue 库。 The project prefers a built library over a fully built app.该项目更喜欢构建库而不是完全构建的应用程序。 The library build works, but the library does not work in combination with Vue 3. Let me elaborate...库构建有效，但库不能与 Vue 3 结合使用。让我详细说明......

First create a simple Vue 3 application.首先创建一个简单的 Vue 3 应用程序。 Something like command vue create builds.类似于命令vue create构建。 Then build the library using:然后使用以下方法构建库：

vue build App.vue -t lib

This results in some compiled files, one of them is App.umd.js .这会产生一些编译文件，其中之一是App.umd.js 。 When using Vue 2 and the following init code, it works fine.使用 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>

But when using Vue 3 and the following init code, it will result in a JavaScript error.但是在使用Vue 3和下面的初始化代码时，会出现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>

The JavaScript error is: JavaScript 错误是：

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

I assume Vue CLI should be able to build a library for Vue 3. Can this be achieved?我假设 Vue CLI 应该能够为 Vue 3 构建一个库。这可以实现吗？

I use @vue/cli 4.5.13 which is the latest at this time of writing.我使用 @vue/cli 4.5.13，这是撰写本文时最新的版本。

Answer 1

I'm assuming you're using the same Vue 2 library in both Vue 2 and Vue 3 applications.我假设您在 Vue 2 和 Vue 3 应用程序中使用相同的 Vue 2 库。 So when you try to use a Vue 2 library in a Vue 2 app it works, but when you try to use a Vue 2 library in a Vue 3 app it doesn't work?因此，当您尝试在 Vue 2 应用程序中使用 Vue 2 库时它可以工作，但是当您尝试在 Vue 3 应用程序中使用 Vue 2 库时它不起作用？

Vue 3 is not reverse compatible with Vue 2, so that's why. Vue 3 与 Vue 2 不反向兼容，所以这就是原因。

You'd need to build you library with Vue 3 to use it in a Vue 3 app.您需要使用 Vue 3 构建库才能在 Vue 3 应用程序中使用它。

You could also give https://www.npmjs.com/package/vue-demi a try您也可以试试https://www.npmjs.com/package/vue-demi

Answer 2

The Vue SFC rollup package allows you to do that Vue SFC 汇总package允许您这样做

Vue CLI 可以为 Vue 3 构建库吗？

问题描述

2 个解决方案

解决方案1
1

解决方案2
0 2022-05-18 00:01:20

Vue CLI 可以为 Vue 3 构建库吗？

问题描述

2 个解决方案

解决方案1 1

解决方案2 0 2022-05-18 00:01:20

解决方案1
1

解决方案2
0 2022-05-18 00:01:20