使用 .env.development 而不是 .env 時 process.env 返回 undefined

Question

我正在使用 Webpack 進行開發。

當我使用.env文件運行項目時，它按預期工作。

但是當我將它的文件名更改為.env.development時， process.env變為undefined 。

我該如何解決？

package.json

  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js"

webpack.config.js

const webpack = require("webpack");
const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require("dotenv-webpack");

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "./src/index.jsx"),
  devtool: "source-map",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  devServer: {
    port: 3000,
    static: true,
    historyApiFallback: true,
    open: true,
  },
  resolve: {...},
  module: {...},
  plugins: [
    new Dotenv(),
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
      favicon: "public/favicon.ico",
    }),
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
    new webpack.ProvidePlugin({
      process: "process/browser",
    }),
  ],
};

Answer 1

dotenv默認只查找.env文件。 這是經過深思熟慮的，因為 env 文件應該是本地的，並且特定於應用程序運行的環境。您不應該為不同的環境保留不同版本的 env。

我將引用dotenv的文檔：

我應該有多個 .env 文件嗎？

不，我們強烈建議不要使用“主” .env文件和“環境” .env文件，如.env.test 。 您的配置應該因部署而異，並且您不應該在環境之間共享值。

在十二因素應用程序中，環境變量是精細控件，每個控件都與其他環境變量完全正交。 它們從不組合為“環境”，而是為每個部署獨立管理。 這是一個 model，隨着應用程序在其生命周期內自然擴展到更多部署，它可以平滑擴展。

–十二要素應用程序

但是，如果您選擇，您可以告訴dotenv-webpack在哪里查找您的文件：

  plugins: [
    new Dotenv({
        path: './.env.development',
    }),