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

Question

问题描述
想要把所有js文件打包成一个js文件！
问题出现的环境背景及自己尝试过哪些方法
用require就能打包成一个js文件，但是打包之后页面不能显示
相关代码
//请把代码文本粘贴到下方（请勿用图片代替代码）
importVuefrom'vue'
importRouterfrom'vue-router'
Vue.use(Router)
exportdefaultnewRouter({
//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'),
},
constpath=require('path')
constHTMLPlugin=require('html-webpack-plugin')
constwebpack=require('webpack')
constExtractPlugin=require('extract-text-webpack-plugin')
constfs=require('fs');
constmainFile='index.js';
constisDev=process.env.NODE_ENV==='development'
constsrcRoot=path.resolve(__dirname,'src');
constconfig={
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:[
newwebpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev?'"development"':'"production"'
}
}),
//newwebpack.optimize.CommonsChunkPlugin({//v5最少2个文件开始提取共用模块
//async:'async-common',
//children:true,//如果设置为`true`，所有公共chunk的子模块都会被选择
//minChunks:2
//}),
//newwebpack.optimize.CommonsChunkPlugin({//v2打包lodash
//name:'vendor',
//minChunks:1
//}),
newHTMLPlugin()
]
}
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(
newwebpack.HotModuleReplacementPlugin(),
newwebpack.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

非懒加载写法importVuefrom'vue'importRouterfrom'vue-router'importIndexfrom'./views/index/Index.vue'Vue.use(Router)exportdefaultnewRouter({//mode:'history',base:process.env.BASE_URL,routes:[{path:'/index',name:'index',component:Index,}]懒加载写法importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)exportdefaultnewRouter({//mode:'history',base:process.env.BASE_URL,routes:[{path:'/index',name:'index',component:()=>import('./views/index/Index.vue'),}]

Answer 2

1,importVuefrom'vue'importRouterfrom'vue-router'importMainfrom'../pages/Main.vue'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',component:Main}]})2,importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',component:require('../pages/Main.vue').default}]})