使用 webpack 未加载 Vuejs 组件答案

【问题标题】：Vuejs component is not loaded by using webpack使用 webpack 未加载 Vuejs 组件
【发布时间】：2018-09-16 17:18:26
【问题描述】：

import Vue from 'vue'
import ProductEdit from './ProductEdit.vue'
import App from 'components/App.vue'

new Vue({
  el: '#page',
  components: {
    'app': App
  },
  render: h => h(ProductEdit)
})

为什么ProductEdit 被渲染，而App 却没有？这是我的 html 文件：

{% load render_bundle from webpack_loader %}

<div id="page">
    <h1>TEST</h1>
    <app>

    </app>
</div>

{% render_bundle page %}

此外，“TEST”标头也不会呈现。我该如何调试呢？控制台没有显示任何错误。

编辑：我也试过不使用渲染功能，但没有帮助。

【问题讨论】：

标签： javascript vue.js webpack

【解决方案1】：

render function 替换了指定 el 的模板内容（即本例中的 #page 元素）。如果您更喜欢使用 in-DOM 模板（似乎是这种情况），则必须删除渲染功能：

new Vue({
  el: '#page',
  // render: /* ... */    // DELETE
})

我假设您希望 App 包含 ProductEdit。为此，请在App 中注册ProductEdit 组件：

// App.vue
export default {
  components: {
     ProductEdit,
  },
})

...并在App的模板中添加元素：

<!-- App.vue -->
<template>
  <div>
    <product-edit />
  </div>
<template>

demo

【讨论】：

你是对的，但这不是问题所在。我也用我们的渲染功能试过了，没有用。
“没用”是什么意思？您看到的错误/行为是什么？
错误是一样的，没有渲染。我在我的案例中发布了带有解决方案的答案。
嗯。不确定 Webpack 是如何导致原始问题的，但我很高兴你让它正常工作。 :)

【解决方案2】：

好的，我修好了。问题是我在webpack.config.js 中重新定义了resolve 属性，它覆盖了通过vue cli 生成的默认解析：

...

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
...

  resolve: {
    alias: {
      'components': path.resolve(__dirname, 'src/components'),
    },
  },

所以我把它合并成：

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'components': path.resolve(__dirname, 'src/components'),
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

【讨论】：