vue.js - 生产和暂存构建不同

Question

我的应用有 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
    })
  ],
};

Answer 1

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

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

NODE_ENV=production