使用 webpack 未加载 Vuejs 组件

Question

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”标头也不会呈现。 我该如何调试呢？ 控制台不显示任何错误。

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

Answer 1

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

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>

演示

Answer 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']
  },