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开始的最简单的方法。