不用vuejs的路由懒加载，直接用require引入文件，为什么不起作用？能帮忙解决吗

Question

问题描述

想要把所有js文件打包成一个js文件！

问题出现的环境背景及自己尝试过哪些方法

用require就能打包成一个js文件，但是打包之后页面不能显示

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    // mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
        path: '/',
        redirect: {
            name: 'index'
        },
    },
    //首页
    {
        path: '/index',
        name: 'index',
        component: require("./views/index/Index.vue"),

    },
    {
        path: '/games',
        name: 'games',
        component: require( /* webpackChunkName: "index" */ './views/index/Games.vue'),

    },

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ExtractPlugin = require('extract-text-webpack-plugin')
const fs = require('fs');
const mainFile = 'index.js';

const isDev = process.env.NODE_ENV === 'development'
const srcRoot = path.resolve(__dirname, 'src');


const config = {
    target: 'web',
    entry: path.join(__dirname, 'src/main.js'),
    output: {
        filename: 'pk-skin.min.js',
        path: path.join(__dirname, 'dev')
    },
    resolve: {
        alias: {
            components: path.resolve(srcRoot, 'components'),
            "@": path.resolve(srcRoot),
            "vue$": 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
     devServer: {
        port: 8001,
        host: '127.0.0.1',
        overlay: {
            errors: true,
        },
        // historyApiFallback: {
        //     index: '/public/index.html'
        // },
        hot: true
    },

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader",
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader",
            },
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]',
                }
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            name: 'fonts/[name].[hash:7].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    // plugins: [
        
    //     // {
    //     //     filename: 'index' + '.html',
    //     //     template: 'index' + '.html'
    //     // }
    // ]
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        // new webpack.optimize.CommonsChunkPlugin({ //v5 最少2个文件开始提取共用模块
        //     async: 'async-common',
        //     children: true, // 如果设置为 `true`，所有  公共chunk 的子模块都会被选择
        //     minChunks: 2
        // }),
        // new webpack.optimize.CommonsChunkPlugin({ //v2 打包lodash
        //     name: 'vendor',
        //     minChunks: 1
        // }),
        new HTMLPlugin()
    ]
}

if (isDev) {
    config.module.rules.push({
        test: /\.styl/,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: 'postcss-loader'
                // options: 
                //     sourceMap: options.sourceMap,
                //     modules: true  //添加
                // }
            },
            'stylus-loader'
        ]
    })
    config.devtool = '#cheap-module-eval-source-map'
    config.devServer = {
        port: 8000,
        host: '0.0.0.0',
        overlay: {
            errors: true,
        },
        hot: true
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
} else {
    config.entry = {
        app: path.join(__dirname, 'src/main.js')
        // vendor: ['vue']
    }
    config.devtool = '#source-map'
    config.output.filename = 'pk-skin.[name].min.js'
}

module.exports = config

你期待的结果是什么？实际看到的错误信息又是什么？

能够打包成一个js文件，还能被编译~

Answer 1

非懒加载写法

import Vue from 'vue'
import Router from 'vue-router'
import Index from './views/index/Index.vue'
Vue.use(Router)

export default new Router({
    // mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/index',
            name: 'index',
            component: Index,
    
        }
    ]

懒加载写法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
    // mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/index',
            name: 'index',
            component: () => import('./views/index/Index.vue'),
    
        }
    ]

Answer 2

1,

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../pages/Main.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})

2,

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: require('../pages/Main.vue').default
    }
  ]
})