生产和暂存构建不同答案

【问题标题】：Production and Staging build are different生产和暂存构建不同
【发布时间】：2020-11-13 09:51:35
【问题描述】：

我的应用有 3 个环境，它们改变了 API 基本 url：

• 生产

• 分期

• 本地

在为生产构建我的应用程序时，我使用$ vue-cli-service build，它以应有的方式构建一切，完美！

在为 staging 构建时，我使用 $ vue-cli-service build --mode staging，这给我带来了一些问题：

• 我的文件的压缩方式与生产方式不同；

• 我的文件未经过哈希处理，包含 [name].[hash].[extension]

• 我的 service-worker 不是由 root 的 registerServiceWorker 生成的。

如何将我的暂存版本设置为与我在生产中使用的完全相同的版本？

我的 webpack 配置

const path = require("path");
const webpack = require("webpack");
const WebpackAssetsManifest = require('webpack-assets-manifest');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["vue-style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.csv$/,
        loader: 'csv-loader',
        options: {
          dynamicTyping: true,
          header: true,
          skipEmptyLines: true
        }
      },
      {
        test: /\.(csv|xlsx|xls)$/,
        loader: 'file-loader',
        options: {
          name: `files/[name].[ext]`
        }
      }
    ],
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]-[hash].js',
    chunkFilename: '[id]-[chunkhash].js',
  },
  plugins: [
    new WebpackAssetsManifest({
      publicPath: process.env.VUE_APP_FRONTEND_ROOT_URL,
    }),
    new webpack.DefinePlugin({
      "API_URL": process.env.VUE_APP_FRONTEND_ROOT_URL
    })
  ],
};

【问题讨论】：

如果您希望 staging 与生产完全相同，使用相同的命令？ Vue 可能在做某种if(production) { minify and cache bust } 逻辑。
我需要改变环境，我有生产API和Staging API（测试版）
为此使用 .env 文件之类的东西。
但我使用的是 .env，我有 .env（用于生产）、.env.staging（用于暂存）和 .env.staging.local，这是唯一的使用点 - -模式分期
在我的设置中，它是一个.env，在适当的地方有不同的内容。不在版本控制中。同样，Vue 很可能在 CLI 中内置了各种“如果我们在生产中，请执行此步骤”。

标签： vue.js webpack

【解决方案1】：

经过 3 天的研究，我找到了解决方案，它是如此简单，让我抓狂。

在我的.env.staging 文件中，我只需要将NODE_ENV 重写为生产，这样我的API 将作为暂存运行，而我的生产配置将正常运行。

NODE_ENV=production

【讨论】：