Vue.JS未能動態加載模板

Question

我無法設法構建類似於vue.js示例路由器應用程序（https://github.com/chrisvfritz/vue-2.0-simple-routing-example）的東西。

我已經刪除了每一個花哨的東西，以使其工作。但我仍然對頁面加載臭名昭著的錯誤消息：

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

found in 

---> <Anonymous> 
     <Root> 

我沒做什麼特別的，只是試圖動態加載一個頁面：

// file: app/index.js 
import Vue from 'vue'; 

const app = new Vue({ 
    el: "#app", 
    data: { 
    }, 
    computed: { 
    ViewComponent() { 
     const matchingView = 'Home'; 

     return require('./pages/' + matchingView + '.vue'); 
    }, 
    }, 
    render(h) { 
    return h(this.ViewComponent); 
    }, 
}); 

和頁面只是一個靜態模板：

// file app/pages/Home.vue 
<template> 
    <p>Home Page</p> 
</template> 

<script> 
    export default { 
    }; 
</script> 

我不明白的是，我可以讓我的網頁的工作，如果我靜態導入我的網頁：

// file app/index.js 
import HomePage from './pages/Home.vue'; 

const app = new Vue({ 
    // ... 
    computed: { 
    ViewComponent() { 
     return HomePage; 
    } 
    } 
}); 

我懷疑我沒有正確配置我的webpack版本，但無法找到這裏發生的事情......我已經按照文檔中的說明安裝了vue-loader和vue-template-compiler，但它沒有改變任何東西。

這裏是我的依賴關係：

"devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.24.1", 
    "vue-loader": "^13.0.3", 
    "vue-template-compiler": "^2.4.2", 
    "webpack": "^3.4.1", 
    "webpack-dev-server": "^2.6.1" 
    }, 
    "dependencies": { 
    "vue": "^2.4.2" 
    } 

而且webpack.config.json文件

var path = require('path'); 


module.exports = { 
    entry: './app/index.js', 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    publicPath: '/dist/', 
    filename: 'app.js', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     use: { 
      loader: 'vue-loader', 
     }, 
     }, 
     { 
     test: /\.test$/, 
     exclude: '/node_modules/', 
     use: { 
      loader: 'babel-loader', 
     }, 
     }, 
    ], 
    }, 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js', 
    } 
    }, 
    devServer: { 
    historyApiFallback: true, 
    noInfo: true, 
    }, 
}; 

Answer 1

我知道這並不直接回答你的問題，但如果你只是想試用VUE使用vue-cli來製作一個簡單的應用程序。
https://vuejs.org/v2/guide/installation.html#CLI
https://vuejs-templates.github.io/webpack/
這是從vue開始的最簡單的方法。