不用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
}
]
})