VueJS 嵌套組件在 NPM 包中失敗

Question

下面的例子使用了簡化的例子。

兩個組件單獨工作，但是當一個組件嵌套在另一個組件中時，它們都不會在頁面上呈現。

index.js（入口點）

// Test components
import TestComponent from '../src/TestComponent.vue'
import Test2Component from '../src/Test2Component.vue'

export {
    TestComponent,
    Test2Component
}

TestComponent和Test2Component都將以這種方式呈現：

<template>
  <div class="container">
    <TestComponent></TestComponent>
    <Test2Component></Test2Component>
  </div>
</template>

<script>
import Vue from 'vue'
import { TestComponent, Test2Component } from 'myPackage'
Vue.component('TestComponent', TestComponent);
Vue.component('Test2Component', Test2Component);

但是，如果我將Test2Component標簽移動到Test1Component.Vue ：

<template>
    <p>This is the TestComponent</p>
    <Test2Component></Test2Component>
</template>

<script>
import Vue from 'vue'
import Test2Component from './Test2Component';
Vue.component('Test2Component', Test2Component);
console.log( Test2Component)

export default {
  name: 'TestComponent',
  components: {
    Test2Component
  }
}
</script>

甚至沒有TestComponent.vue父組件呈現。

Answer 1

我找到了解決方案。 不要import Vue from 'vue'並修改它，這是 Vue 實例的副本。 這種語法似乎特別限制它在打包時工作。

而是將其添加為export default的組件：

<script>
import { TestComponent, Test2Component} from 'myPackage'

export default {
  components: {
    'test-component': TestComponent,
    'test2-component': Test2Component
  },
...
</script>