如何使执行build:ceshi打出的包与执行build:production, 打出的包一致?

Question

package.json设置

    "build:ceshi": "vue-cli-service build --mode ceshi",
    "build:preview": "vue-cli-service build --mode preview",
    "build:production": "vue-cli-service build --mode production",
    "build:stage": "vue-cli-service build --mode staging",

vue.config.js配置:

    config
      .when(process.env.VUE_APP_ENVIRONMENT !== 'dev',
        config => {
          config
            .optimization.splitChunks({
              chunks: 'all',
              maxInitialRequests: Infinity, // 默认为3，调整为允许无限入口资源
              minSize: 20000,
              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[\\/]_?xqh-element(.*)/ // in order to adapt to cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: path.resolve(__dirname, 'src/components'),
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                },
                vendors: {
                  // 拆分依赖，避免单文件过大拖慢页面展示
                  // 得益于HTTP2多路复用，不用太担心资源请求太多的问题
                  name (module) {
                    // 拆包
                    const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                    // 进一步将Ant组件拆分出来,请根据情况来
                    // const packageName = module.context.match(/[\\/]node_modules[\\/](?:ant-design-vue[\\/]es[\\/])?(.*?)([\\/]|$)/)[1]
                    return `npm.${packageName.replace('@', '')}` // 部分服务器不允许URL带@
                  },
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial'
                }
              }
            })

          config.optimization.runtimeChunk('single')
          config.optimization.minimizer = [
            new UglifyJsPlugin({
              uglifyOptions: {
                // 删除注释
                output: {
                  comments: false
                },
                // 删除console debugger 删除警告
                compress: {
                  drop_console: true, //console
                  drop_debugger: false,
                  pure_funcs: ['console.log'] //移除console
                }
              }
            })
          ]
        }
      )

奇怪的是当执行build:ceshi, 打出的包是这样的:

当执行build:production, 打出的包是这样的, 分包更小:

.env文件内容都是一样的

为什么会这样呢, 如何使执行build:ceshi打出的包与执行build:production, 打出的包一致?

.env.ceshi里面添加NODE_ENV = production就可以了, 只是不明白为什么, 希望大佬不吝赐教

Answer 1

.env.ceshi 的开头加上 NODE_ENV = production 就可以了

一般来说是这样的：

# 测试环境配置

# 编译模式
NODE_ENV = production
BABEL_ENV = production

# 部署目录
VUE_APP_PUBLIC_PATH = /
# 接口地址
VUE_APP_API_BASE = xxxxx
# 代理地址
VUE_APP_API_PROXY = xxxxx

也可以用 cross-env 在 package.json 的执行的脚本中指定编译模式。但是直接修改 .env 文件就好了，多个包多个麻烦。