Webpack+React+TypeScript环境下如何动态判断环境并加载对应路由URL

在这类项目里，判断环境并动态加载URL的核心思路是通过Webpack注入环境变量，或者结合.env文件来管理不同环境的配置，下面给你两种最常用的实现方案：

方案一：使用Webpack的DefinePlugin直接注入环境变量 #

这是Webpack原生支持的方式，不需要额外插件，适合简单的环境区分。

1. 配置Webpack的DefinePlugin #

在你的webpack.config.ts（或.js）中，根据mode区分开发/生产环境，注入对应的环境变量：

const webpack = require('webpack');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development'),
      'process.env.API_BASE_URL': JSON.stringify(
        isProduction ? 'https://prod-api.example.com' : 'http://localhost:3001'
      ),
    }),
  ],
};

注意：这里要用JSON.stringify()包裹变量值，因为DefinePlugin是直接替换代码中的字符串，不是赋值。

2. 为TypeScript添加类型声明 #

因为TypeScript默认不知道process.env上的自定义变量，所以需要在src目录下创建env.d.ts文件，添加类型声明：

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NODE_ENV: 'development' | 'production';
      API_BASE_URL: string;
    }
  }
}

export {};

3. 在React组件中使用 #

现在你可以在.tsx文件中直接使用这些变量了：

import React from 'react';

const App = () => {
  const apiUrl = process.env.API_BASE_URL;

  const fetchData = async () => {
    const response = await fetch(`${apiUrl}/users`);
    const data = await response.json();
    console.log(data);
  };

  return (
    <div>
      <h1>当前环境：{process.env.NODE_ENV}</h1>
      <button onClick={fetchData}>获取数据</button>
    </div>
  );
};

export default App;

方案二：使用.env文件管理环境变量（更灵活） #

如果你的环境配置比较多，或者需要区分更多环境（比如测试环境），推荐用dotenv-webpack插件加载不同的.env文件。

1. 安装依赖 #

npm install dotenv-webpack --save-dev

2. 创建不同环境的.env文件 #

在项目根目录下创建：

• .env.development：

  NODE_ENV=development
  API_BASE_URL=http://localhost:3001
  

• .env.production：

  NODE_ENV=production
  API_BASE_URL=https://prod-api.example.com
  

3. 配置Webpack加载对应.env文件 #

修改webpack.config.ts：

const Dotenv = require('dotenv-webpack');
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  plugins: [
    new Dotenv({
      path: isProduction ? './.env.production' : './.env.development',
    }),
  ],
};

4. TypeScript类型声明（同方案一） #

同样需要创建env.d.ts来声明变量类型，避免TS报错。

5. 在组件中使用（同方案一） #

直接通过process.env.API_BASE_URL获取对应环境的URL即可。

额外提示 #

• 启动项目时，记得在package.json的脚本中指定NODE_ENV：

  {
    "scripts": {
      "start": "NODE_ENV=development webpack serve",
      "build": "NODE_ENV=production webpack"
    }
  }
  

• 如果是Windows系统，启动脚本需要用cross-env来统一环境变量的设置，先安装cross-env：

  npm install cross-env --save-dev
  

  然后修改脚本：

  {
    "scripts": {
      "start": "cross-env NODE_ENV=development webpack serve",
      "build": "cross-env NODE_ENV=production webpack"
    }
  }
  

内容的提问来源于stack exchange，提问作者Angshuman Agarwal