vue-cli4路由懒加载失效

Z时代
2024-01-10
分类：技术分享

将项目由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')
}
)
}}