vue-cli4路由懒加载失效

Question

将项目由vue-cli2升级到了vue-cli4，已经能正常dev和build了，build后的代码也可以正常部署在Nginx进行访问，但是build后的dist/ static/js中只有几个比较大的js文件，可见路由对应的组件没有被拆分打包

以上是build后的文件

在之前的vuecli2中还是可以的

相关代码(router/index.js)

{

path: '/myAccount',

fullPath: '/myAccount',

hidden: true,

component: Layout,

meta: {

title: 'My_Account'

},

children: [{

path: '',

hidden: true,

component: () => import('@/views/account/myAccount')

}]

}

安装的依赖：

"dependencies": {

"axios": "0.18.1",

"babel-polyfill": "^6.26.0",

"compression-webpack-plugin": "^3.0.0",

"core-js": "3.6.5",

"current-device": "^0.8.2",

"echarts": "^4.9.0",

"element-ui": "2.10.1",

"js-cookie": "2.2.0",

"normalize.css": "7.0.0",

"nprogress": "0.2.0",

"path-to-regexp": "2.4.0",

"qs": "^6.7.0",

"vue": "2.6.10",

"vue-head": "^2.1.2",

"vue-i18n": "7.3.2",

"vue-router": "3.0.6",

"vuex": "3.1.0"

},

"devDependencies": {

"@vue/cli-plugin-babel": "4.4.4",

"@vue/cli-plugin-eslint": "4.4.4",

"@vue/cli-plugin-unit-jest": "4.4.4",

"@vue/cli-service": "4.4.4",

"@vue/test-utils": "1.0.0-beta.29",

"autoprefixer": "9.5.1",

"babel-eslint": "10.1.0",

"babel-jest": "23.6.0",

"babel-plugin-component": "^1.1.1",

"babel-plugin-dynamic-import-node": "2.3.3",

"chalk": "2.4.2",

"connect": "3.6.6",

"cross-env": "^7.0.2",

"eslint": "6.7.2",

"eslint-plugin-vue": "6.2.2",

"html-webpack-plugin": "3.2.0",

"http-proxy-agent": "2.1.0",

"mockjs": "1.0.1-beta3",

"runjs": "4.3.2",

"sass": "1.26.8",

"sass-loader": "7.3.1",

"script-ext-html-webpack-plugin": "2.1.3",

"serve-static": "1.13.2",

"svg-sprite-loader": "4.1.3",

"svgo": "1.2.2",

"vue-template-compiler": "2.6.10",

"webpack-merge": "4.1.4"

}

vue.config.js如下

'use strict'

const path = require('path')

const configs = require('./config')

const ProxyAgent = require('http-proxy-agent')

function resolve(dir) {

return path.join(__dirname, dir)

}

const CompressionWebpackPlugin = require('compression-webpack-plugin')

// const name = defaultSettings.title || 'vue Admin Template' // page title

// 用于做相应的 merge 处理

const merge = require('webpack-merge')

// 根据环境判断使用哪份配置

const cfg = process.env.NODE_ENV === 'production' ? configs.build.env : configs.dev.env

// If your port is set to 80,

// use administrator privileges to execute the command line.

// For example, Mac: sudo npm run

// You can change the port by the following methods:

// port = 9528 npm run dev OR npm run dev --port = 9528

// const port = process.env.port || process.env.npm_config_port || 9528 // dev port

const NAME = process.env.NAME

// All configuration item explanations can be find in https://cli.vuejs.org/config/

const publicPath = {

web: '/',

ms: '/ms/'

}

const devPort = {

web: 8080,

ms: 8090,

partner: 8070,

channelpartner: 8060

}

module.exports = {

/**

* You will need to set publicPath if you plan to deploy your site under a sub path,

* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,

* then publicPath should be set to "/bar/".

* In most cases please use '/' !!!

* Detail: https://cli.vuejs.org/config/#publicpath

*/

publicPath: publicPath[NAME],

outputDir: 'dist/' + [NAME],

assetsDir: 'static',

lintOnSave: false,

productionSourceMap: false,

devServer: {

port: devPort[NAME],

open: true,

overlay: {

warnings: false,

errors: true

}

// before: require('./mock/mock-server.js')

},

configureWebpack: config => {

// provide the app's title in webpack's name field, so that

// it can be accessed in index.html to inject the correct title.

// name: name,

// const plugins = []

if (process.env.NODE_ENV === 'production') {

// console.log(CompressionWebpackPlugin)

// plugins.push(

// new CompressionWebpackPlugin({

// // 目标文件名称。[path] 被替换为原始文件的路径和 [query] 查询

// filename: '[path].gz[query]',

// // 使用 gzip 压缩

// algorithm: 'gzip',

// // 处理与此正则相匹配的所有文件

// test: /.(js|css|json|txt|html|ico|svg)(?.*)?$/i,

// threshold: 10240, // 1k以上开始压缩gz

// minRatio: 0.8

// })

// )

return {

plugins: [

new CompressionWebpackPlugin({

// 目标文件名称。[path] 被替换为原始文件的路径和 [query] 查询

filename: '[path].gz[query]',

// 使用 gzip 压缩

algorithm: 'gzip',

// 处理与此正则相匹配的所有文件

test: /.(js|css)(?.*)?$/i,

threshold: 10240, // 10k以上开始压缩gz

minRatio: 0.8

})

]

}

}

// config.plugins = [...config.plugins, ...plugins]

},

chainWebpack(config) {

// 定义变量别名

config.resolve.alias

.set('@', resolve('src')) // 定义 src 目录变量

.set('_com', resolve('src/components')) // 定义 components 目录变量

.set('_img', resolve('src/assets/img')) // 定义 img 目录变量

.set('_images', resolve('src/assets/images')) // 定义 images 目录变量

// HtmlWebpackPlugin

config

.plugin('html')

.tap(args => {

// const name = 'process.env'

// args[0].template = 'index.html'

args[0].template = path.relative(__dirname, './template/' + NAME + '.html')

args[0].environment = process.env.ENVIR

// args[0][name] = merge(args[0][name], {

// TYPE: JSON.stringify('prod')

// })

return args

})

config

.plugin('define')

.tap(args => {

const name = 'process.env'

// 使用 merge 保证原始值不变

args[0][name] = merge(args[0][name], cfg)

return args

})

// it can improve the speed of the first screen, it is recommended to turn on preload

config.plugin('preload').tap(() => [

{

rel: 'preload',

// to ignore runtime.js

// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171

fileBlacklist: [/.map$/, /hot-update.js$/, /runtime..*.js$/],

include: 'initial'

}

])

// when there are many pages, it will cause too many meaningless requests

config.plugins.delete('prefetch')

// set svg-sprite-loader

config.module

.rule('svg')

.exclude.add(resolve('src/icons'))

.end()

config.module

.rule('icons')

.test(/.svg$/)

.include.add(resolve('src/icons'))

.end()

.use('svg-sprite-loader')

.loader('svg-sprite-loader')

.options({

symbolId: 'icon-[name]'

})

.end()

config

.when(process.env.NODE_ENV !== 'development',

config => {

config

.plugin('ScriptExtHtmlWebpackPlugin')

.after('html')

.use('script-ext-html-webpack-plugin', [{

// `runtime` must same as runtimeChunk name. default is `runtime`

inline: /runtime..*.js$/

}])

.end()

config

.optimization.splitChunks({

chunks: 'all',

cacheGroups: {

libs: {

name: 'chunk-libs',

test: /[/]node_modules[/]/,

priority: 10,

chunks: 'initial' // only package third parties that are initially dependent

},

elementUI: {

name: 'chunk-elementUI', // split elementUI into a single package

priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app

test: /[/]node_modules[/]_?element-ui(.*)/ // in order to adapt to cnpm

},

commons: {

name: 'chunk-commons',

test: resolve('src/components'), // can customize your rules

minChunks: 3, // minimum common number

priority: 5,

reuseExistingChunk: true

}

}

})

// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk

config.optimization.runtimeChunk('single')

}

)

}

}

希望大家帮忙看下是什么原因，在百度和Google实在没有查到问题原因

Answer 1

楼主解决了吗