VueJS 嵌套组件在 NPM 包中失败答案

【问题标题】：VueJS nested components fail in an NPM packageVueJS 嵌套组件在 NPM 包中失败
【发布时间】：2021-01-10 19:28:07
【问题描述】：

下面的例子是使用简化的例子。

两个组件单独工作，但是当一个组件嵌套在另一个组件中时，它们都不会在页面上呈现。

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 父组件也不渲染。

【问题讨论】：

标签： javascript vue.js npm webpack

【解决方案1】：

我找到了解决方案。不要import Vue from 'vue' 和修改它，这是 Vue 实例的副本。这种语法似乎特别限制了它在打包时的工作。

而是将其作为组件添加到export default：

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

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

【讨论】：