Vue 3 渲染子组件的子组件的问题答案

【问题标题】：Vue 3 problem rendering child of the child componentsVue 3 渲染子组件的子组件的问题
【发布时间】：2021-05-04 20:53:12
【问题描述】：

我使用Webpack 5.21.2 和Webpack CLI 4.5.0 创建了一个Vue 3.0.5 应用程序。我构建了一个全局组件 my-component.js：

import SecondComponent from './second-component.vue';
app.component('global-component', {
  template: `
    <div>
      <h1>Hi!</h1>
      <second-component></second-component>
    </div>
  `,
 components: {
   SecondComponent
 }
})

导入的second-component.vue：

<template>
  <div>
    <div>{{someData}}</div>
    <third-component :name="helloWorld"></third-component>
  </div>
</template>

<script>
import ThirdComponent from './third-component.vue';
export default {
 name: 'second-component',
 components: {
   ThirdComponent 
 },
 data: function () {
   return {
     someData: 'Just some data!',
     helloWorld: 'Hello World!',
   }
  }
}
</script>

第三个组件third-component.vue：

<template>
  <div>
    <div>{{name}}</div>
  </div>
</template>

<script>
export default {
  name: 'third-component',
  props: {
    name: String,
  }
}
</script>

这里是 webpack 配置 webpack.config.js：

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  mode: 'production',
  entry: {
    global_component: './global-component.js',
  },
  output: {
    path: `${__dirname}`,
    filename: '[name]_bundled.js'
  },
  resolve: {
   extensions: ['*', '.js', '.vue']
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

我在 index.html 中使用的捆绑文件如下：

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
  <script>const app = Vue.createApp({});</script>
  <script type="application/javascript" src="global_component_bundled.js"></script>
  <div id="app">
    <global-component></global-component>
  </div>
  <script>app.mount("#app");</script>
</body>

我得到的问题是子组件的子组件没有渲染。就我而言，这是我要导入 second-component.vue 的组件 third-component.vue。但是，当我将组件 third-component.vue 直接用于 my-component.js 时，它可以工作。有人可以解释为什么以及如何解决这个问题吗？这里我有一个codesandbox。

【问题讨论】：

@BoussadjraBrahim 我最后有一个捆绑文件，问题是third-component.vue 没有呈现。
@BoussadjraBrahim 这里你可以看看codesandbox.io/s/webpack5-vue3-tx8vp?file=/package.json
当我检查我看到的页面时，<third-component name="helloWorld"></third-component> 似乎没有被解析
@BoussadjraBrahim 是的，没有像我在帖子中写的那样渲染（或者解析和渲染之间存在差异？如果是，那么我应该更改帖子的名称）但问题是为什么？我还在浏览器中使用刹车点进行检查，并且该组件上没有触发断点。
@BoussadjraBrahim 是的，问题是我不能这样做，因为我的项目页面中有一些组件被脚本标签引用。使用 Vue 2 可以完美运行，但使用 Vue 3 则不行（如果您有其他想法，我愿意接受）。但是你不知道为什么会出现这个问题？

标签： vue.js webpack vuejs3 webpack-5 webpack-cli

【解决方案1】：

我找了很久，终于找到了。我使用来自CDN 的vue，在这种情况下我应该说webpack 使用外部Vue。只需在 webpack.config.js 中进行此配置更改：

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
 ...
 externals: {
   // Here you tell webpack to take Vue from CDN
   vue: "Vue"
 },
 ...
}

通过这些更改webpack 捆绑组件并从CDN 获取Vue。我希望这个答案对其他人有所帮助。在这里我已经进行了更改：codesandbox.

【讨论】：