前端 - 如何使执行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 = productionBABEL_ENV = production# 部署目录VUE_APP_PUBLIC_PATH = /# 接口地址VUE_APP_API_BASE = xxxxx# 代理地址VUE_APP_API_PROXY = xxxxx

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

Answer 2

首先，你需要确保.env文件的内容是一样的，包括VUE_APP_ENVIRONMENT的值。然后，你可以尝试以下几种方法来使build:ceshi和build:production打出的包一致：

1. 检查.env.production和.env.ceshi文件：确保这两个文件的内容完全一样。有时，可能由于疏忽，这两个文件中的某些设置可能不同。
2. 检查package.json文件：确保build:ceshi和build:production的命令是相同的。在你的例子中，这两个命令是相同的，所以应该没有问题。
3. 检查vue.config.js文件：在这个文件中，你定义了各种构建优化设置。这些设置可能会影响到最终的打包结果。你可以尝试注释掉一些优化设置，然后逐一尝试，看看哪些设置影响了打包结果。
4. 清理缓存：有时候，旧的构建缓存可能会导致问题。你可以尝试清理缓存后重新构建。
5. 检查依赖版本：确保你的项目依赖的版本都是一样的。如果有不同的版本，可能会导致打包结果不同。
6. 查看构建日志：你可以查看构建过程中的日志，看看是否有任何异常或错误。这可能会给你提供一些线索。
7. 更新工具和依赖：确保你使用的所有工具和依赖都是最新版本的。有时候，问题可能是由于使用了过时的工具或依赖引起的。

如果以上方法都不能解决问题，你可能需要提供更多的信息，例如完整的.env文件内容、完整的package.json文件内容、完整的vue.config.js文件内容等，以便更好地帮助你解决问题。