的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。

从版本13.0.0开始，vue-loader不再对输出进行标准化。你所要做的
const app = require('./app.vue').default

所以只是改变Child: require('./child.vue')在display.js到Child: require('./child.vue').default，然后它会工作。

Answer 2

我知道它已经老了，但有人可能会遇到这个问题。

尝试增加决心别名到您的WebPack配置：

module.exports = { 
    // ... 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 
    } 
    } 
} 

更多关于这一点：

https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only