Webpack 挂载 Vue 组件失败

Question

在使用 Webpack 和 Vue 编译项目后，当我打开一个使用 Vue 组件的页面时，我得到:

[Vue warn]: Failed to mount component: template or render function not defined.

代替 Vue 渲染的组件

<-- function (a, b, c, d) { return createElement(vm, a, b, c, d, true); } -->

为什么会出现这个错误？

备注:I've created an MCVE for this problem.使用的确切 Webpack 配置是:

module.exports = {
  entry: __dirname + '/display.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [ { test: /\.vue$/, loader: 'vue-loader' } ]
  }
}

Answer 1

这仅仅是由于 change of vue-loader .

Since version 13.0.0, vue-loader doesn’t normalize exports anymore. You have to do
const app = require('./app.vue').default

所以只需将 display.js 中的 Child: require('./child.vue') 更改为 Child: require('./child.vue') vue').default 然后它就可以工作了。