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 function替换指定的el的模板内容（在这种情况下，即#page元素）。如果您更喜欢使用in-DOM模板（情况似乎如此），则必须删除呈现功能：

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

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

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

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

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

demo

Answer 2

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

...

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

使用Webpack无法加载Vuejs组件

2 个答案: