vue-admin-template
vue-admin-template copied to clipboard
webpack打包时,路由懒加载没有生效,全部都打包到app.js中了
相同环境下,试了下别的项目,是可以分开打包的,但我这项目就不行。请问是什么原因导致的? 这是vue.config.js配置 `'use strict' const path = require('path') const defaultSettings = require('./src/settings.js')
function resolve(dir) { return path.join(__dirname, dir) }
const name = defaultSettings.title || 'vue Admin Template' // page title
// 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 method: // port = 9527 npm run dev OR npm run dev --port = 9527 const port = process.env.port || process.env.npm_config_port || 9528 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/ 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: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: 'default',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// 开发环境使用proxy代理,解决跨域与option请求问题;生产环境此代码无效,请使用nginx反向代理
proxy: {
[process.env.VUE_APP_BASE_API]: {
target:
http://www.api.com/
, changeOrigin: true } } }, configureWebpack: { // 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, resolve: { alias: { '@': resolve('src') } } }, chainWebpack(config) { // it can improve the speed of the first screen, it is recommended to turn on preload // 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.entry('app').clear().add('./src/main-dev.js')
}
)
.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')
config.set('externals', {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT',
lodash: '_',
xlsx: 'xlsx'
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
}
)
}
}
`
遇到同样问题了,解决了没有
vue-cli版本的问题 https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/advanced/lazy-loading.html#vue-cli-3-%E8%AF%A5%E6%96%B9%E6%A1%88%E5%B7%B2%E6%B7%98%E6%B1%B0
我出现了A工程基于vue-admin-template会拆包,基于A工程复制了B工程,B工程偶尔拆包偶尔不拆包的现象
我出现了A工程基于vue-admin-template会拆包,基于A工程复制了B工程,B工程偶尔拆包偶尔不拆包的现象
怎么解决的啊,我也遇到了