Vue CLI 可以為 Vue 3 構建庫嗎？

Question

我想使用 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和下面的初始化代碼時，會出現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，這是撰寫本文時最新的版本。

Answer 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

Answer 2

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