vue报错，打包完成后页面F12提示这样的问题

Question

错误：bundle.js:9657 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Root>
  mian.js:
import Vue from "vue"
import router from "./routers"

import 'bootstrap-datepicker';
import 'bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js'
import 'bootstrap-datepicker/dist/locales/bootstrap-datepicker.en-AU.min.js'
//import '../static/libs/morris/morris.css'//图表插件charts
//import '../static/libs/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css'

//import 'datatables';

const App = new Vue({
    template:'<router-view></router-view>',
    router:router,
    data: {
        currentRoute: window.location.pathname
    },
    computed: {
        ViewComponent () {
            const matchingView = router[this.currentRoute]
            return matchingView
                ? require('./layouts/' + matchingView + '.vue')
                : require('./layouts/404.vue')
        }
    },
    render (h) {
        return h(this.ViewComponent)
    }

}).$mount('#app') ;
window.addEventListener('popstate', () => {
    App.currentRoute = window.location.pathname
})

routers.js：
/**
 * Created by think on 2017/7/11.
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import main from './pages/main.vue'
import home404 from './layouts/404.vue'

Vue.use(VueRouter);

const routes=[
        // 'path':'/',component:main
        {path:'/',component:main},
        {path:'/home404',component:home404,
        children:[
        {path: '/home', component: function (resolve) {
            return require(['./layouts/Home.vue'], resolve)
        }},
        {path: '/about', component: function (resolve) {
            return require(['./layouts/About.vue'], resolve)
        }}
    ]}

];

const router=new VueRouter({
    routes:routes,
    base:__dirname
});
export default router;

webpack.config.js：
/**
 * Created by training_4 on 2017/7/11.
 */
var HtmlWebpackPlugin=require('html-webpack-plugin');
var webpack=require('webpack');
var path=require('path');
module.exports={
    entry:{
        //入口文件
        //"index":__dirname+'/src/js/index.js',
        "main":__dirname+'/src/main.js'
    },
    output:{
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'

    },

    externals:{

    },
    // 加载器
    module:{
        loaders:[
            // 解析.vue文件
            { test: /\.vue$/, loader: 'vue-loader' },
            // 转化ES6的语法
            {test:/\.js$/,loader:'babel-loader',exclude: /node_modules/,query:{compact:true}},//凡是.js文件都使用babel-loader，并且压缩
            // 编译css并自动添加css前缀
            { test: /\.css$/, loader: 'style-loader!css-loader'},
            //.scss 文件想要编译，scss就需要这些东西！来编译处理
            //install css-loader style-loader sass-loader node-sass --save-dev
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            // 图片转化，小于8K自动转化为base64的编码
            //  { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
            { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'},
            //html模板编译？
            { test: /\.(html|tpl)$/, loader: 'html-loader' },
            { test: /\.json$/, loader: 'json-loader' }
        ]
    },
    resolve:{
        // require时省略的扩展名，如：require('module') 不需要module.js
        extensions: ['.js', '.vue'],
        // 别名，可以直接使用别名来代表设定的路径以及其他
        // alias:{
        //     vue:"vue/dist/vue.js"
        // }
        alias: {
            'vue$': 'vue/dist/vue.common.js'
        }
    },
    plugins:[
        new webpack.DefinePlugin({
            'process.env.NODE.ENV':"development"
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.ProvidePlugin({
            //Tether: 'tether',
            jQuery: 'jquery',
            $: 'jquery'
        }),
    ]
};

求大神指教！！！！

Answer 1

将两种实现单页面方式混合，这样是不行的