vue-admin-template icon indicating copy to clipboard operation
vue-admin-template copied to clipboard

webpack打包时,路由懒加载没有生效,全部都打包到app.js中了

Open Lxj96 opened this issue 4 years ago • 4 comments

相同环境下,试了下别的项目,是可以分开打包的,但我这项目就不行。请问是什么原因导致的? 这是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
      })
    }
  )

} } ` image

Lxj96 avatar Jan 15 '21 02:01 Lxj96

遇到同样问题了,解决了没有

xietao91 avatar Jan 21 '21 06:01 xietao91

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

Lxj96 avatar Jan 21 '21 06:01 Lxj96

我出现了A工程基于vue-admin-template会拆包,基于A工程复制了B工程,B工程偶尔拆包偶尔不拆包的现象

xihadandan avatar Jan 25 '21 02:01 xihadandan

我出现了A工程基于vue-admin-template会拆包,基于A工程复制了B工程,B工程偶尔拆包偶尔不拆包的现象

怎么解决的啊,我也遇到了

mystylemylife avatar Feb 15 '23 02:02 mystylemylife