electron + vue 2.9.2 路由模版

環(huán)境是 electron+ vue+ webpack，在electron框架下好像webpack無法運(yùn)行本地服務(wù)端。所以，現(xiàn)在考慮直接用本地文件構(gòu)建vue路由。
根據(jù)vue的sample進(jìn)行了各種配置，結(jié)果如下
webpack.config.js

/* eslint strict: 0 */
'use strict';

const path = require('path');
const webpack = require('webpack');
module.exports ={
    devtool: '#eval-source-map',
    entry: "./src/render/index.js",
    output: {
        path: path.resolve(__dirname,'./dist'),
        publicPath: "/dist/",
        filename: 'build.js'
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // vue.common.js vue.js 都使用過
        }
    },
    module: {
        rules:[
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            },
            {
                test: /\.js$/,
                loader: 'react-hot-loader/webpack',
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.html$/,
                use: {
                    loader:"html-loader"
                }
            },
            {
                test: /\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/,
                query:{
                    presets:["es2015", 'react']
                }
            },
            {test: /\.(png|jpg|gif)$/,loader: 'file-loader?name=[name].[ext]?[hash]' +
            '&outputPath=../src/assets/images' +
            '&useRelativePath=false'},
            {test: /\.css$/,loader: 'style-loader!css-loader'},
            {test: /\.eot/,loader : 'file-loader?prefix=font/&outputPath=/../src/assets/fonts/&useRelativePath=false'},
            {test: /\.woff/,loader : 'file-loader?prefix=font/&outputPath=../src/assets/fonts/&useRelativePath=false' +
            '&limit=10000&mimetype=application/font-woff'},
            {test: /\.woff2/,loader : 'file-loader?prefix=font/&outputPath=../src/assets/fonts/&useRelativePath=false'},
            {test: /\.ttf/, loader : 'file-loader?prefix=font/&outputPath=/../src/assets/fonts/&useRelativePath=false'},
            {test: /\.svg/, loader : 'file-loader?prefix=font/&outputPath=/../src/assets/fonts/&useRelativePath=false'}
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE.ENV':"production"http://development" //定義產(chǎn)品類型
        }),
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery"
        })
    ]
};

package.json

{
  "name": "HimTalk",
  "version": "1.0.0",
  "description": "Talk.run 他說",
  "main": "main.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --inline --progress --hot --content-base ./src/templates",
    "start": "webpack & electron .",
    "packager": "webpack  && electron-packager ./ Himtalk --mac --out ./dist --version 1.0.0 --overwrite --icon=./public/icon/icon.ico"
  },
  "repository": "https://github.com/him-talk/him-talk-run",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "Talk.run",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-register": "^6.9.0",
    "bootstrap-loader": "^2.2.0",
    "css-loader": "^0.28.8",
    "electron": "~1.7.8",
    "electron-packager": "^10.1.1",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-loader": "^0.5.4",
    "html-webpack-plugin": "^2.30.1",
    "is-electron-renderer": "^2.0.1",
    "jquery": "^2.2.4",
    "react-hot-loader": "^3.1.3",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.6.2",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5",
    "webpack-target-electron-renderer": "^0.4.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "font-awesome": "^4.7.0",
    "html5shiv": "^3.7.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "respond": "^0.9.0",
    "vue": "^2.5.13",
    "vue-router": "^2.8.1"
  },
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

index.html 入口文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>{{ name }}</title>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="public/css/ie10-viewport-bug-workaround.css" rel="stylesheet"/>
    <![endif]-->

    <!--[if lt IE 9]>
    <script src="public/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="public/js/ie-emulation-modes-warning.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script>
        require("html5shiv")
        require("respond")
    </script>
    <![endif]-->
</head>
<body>
<div id="container">
    {{ message }}
</div>
<script src="./dist/build.js"></script>
</body>
</html>

main.js 入口腳本文件

window.$ = window.jQuery = require("jquery");
import "bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import '../../public/css/default.css';
import language from "../../public/js/lang"
import Vue from "vue"
import routes from "../../public/js/routes"
Vue.config.debug=true;
//實(shí)例化Vue
// Vue.config.productionTip = false;
// Vue.config.devtools = false;
var pagecontent;
const defaultlang = window.localStorage && window.localStorage.getItem('lang') || process.env.LANG.split(".")[0];
window.localStorage.setItem("lang", defaultlang);
const data = combin_merge(language.config, language[defaultlang]);
data.name = process.env.NAME;
data.message = "Hello World! Welcome to HimTalk";
const vm = new Vue({
    el: "#container",
    data,
    template: '<App/>',
    computed: {
        ViewComponent() {
            const hash = window.location.hash.split("#")[1] ? window.location.hash.split("#")[1] : "/";
            const matchingView = routes[hash];
            console.log(routes);
            console.log("index:"+matchingView);
            if(matchingView){
                pagecontent = require('../templates/' + matchingView + ".vue");
            }else{
                pagecontent = require("../templates/404.vue");
            }
            return pagecontent;
        }
    },
    render (h) {
        return h(this.ViewComponent)
    }
});

routes 路由文件

export default {
    "/": "index",
    "/pool": "pool",
    "/block": "block",
    "/group": "group",
    "/overview": "overview",
    "/send": "send",
    "/received": "received",
    "/transaction": "transaction",
    "/chat": "chat",
    "/firend": "firend",
    "/task": "task",
    "/market": "market",
};

默認(rèn)index.vue

<template>
    <div id="container">
        <header></header>
        <div class="container-fluid content">
            <div class="row">
             <leftview></leftview>
             <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                 <rightview></rightview>
             </div>
            </div>
        </div>
        <footer></footer>
    </div>
</template>

<script>
    import header from "../templates/header.vue"
    import leftview from "../templates/left.vue"
    import rightview from "../templates/right.vue"
    import footer from "../templates/footer.vue"
    export default {
        name: 'index',
        component:{
            header,
            leftview,
            rightview,
            footer
        }
    }
</script>

求各位大神看看到底是什么問題導(dǎo)致無法編譯模版到。錯(cuò)誤代碼提示
Failed to mount component : template or render function not defined.

這個(gè)問題折騰我一天了。初學(xué)vue和webpack框架，不甚明了，還望各位指定秘境

webpack配置別名到方法都測試過了，不適用于我這里。無論是vue.js vue.esm.js vue.common.js 都無效