的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