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

问题描述

想要把所有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文件，还能被编译~