在開(kāi)發(fā)前端項(xiàng)目時(shí)，管理不同環(huán)境（開(kāi)發(fā)、測(cè)試、生產(chǎn)）的變量是常見(jiàn)的需求。cross-env 是一個(gè)跨平臺(tái)的環(huán)境變量設(shè)置工具，能幫助開(kāi)發(fā)者在不同操作系統(tǒng)（如 Windows、macOS、Linux）中統(tǒng)一配置環(huán)境變量。本文將詳細(xì)介紹 cross-env 的安裝與使用，并覆蓋 Vue2、Vue3、React、Angular 四大框架的具體配置方法。

一、什么是 cross-env？

cross-env 解決了不同操作系統(tǒng)下環(huán)境變量設(shè)置的兼容性問(wèn)題。例如，在 Windows 中設(shè)置環(huán)境變量需使用 SET NODE_ENV=production，而 macOS/Linux 使用 export NODE_ENV=production。通過(guò) cross-env，開(kāi)發(fā)者只需一條命令即可跨平臺(tái)運(yùn)行，無(wú)需關(guān)注系統(tǒng)差異112。

二、安裝 cross-env

在所有框架中，安裝方式一致：

npm install --save-dev cross-env

三、通用配置方法

1. 配置 package.json 腳本

在 package.json 的 scripts 字段中，通過(guò) cross-env 定義環(huán)境變量。例如：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development vite",
    "build:prod": "cross-env NODE_ENV=production vite build"
  }
}

• NODE_ENV 是常用變量，用于標(biāo)識(shí)當(dāng)前環(huán)境（development、production 等）。

2. 在代碼中讀取變量

通過(guò) process.env.NODE_ENV 或其他自定義變量（如 VUE_APP_API_URL）獲取值。
注意：部分框架對(duì)變量名有特定要求（如 Vue 要求以 VUE_APP_ 開(kāi)頭）

四、框架專屬配置

1. Vue2 項(xiàng)目

步驟 1：配置環(huán)境文件

• 在項(xiàng)目根目錄創(chuàng)建 .env.development 和 .env.production 文件：

  # .env.development
  VUE_APP_API_URL = http://localhost:3000
  

  # .env.production
  VUE_APP_API_URL = https://api.example.com
  

步驟 2：修改 package.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development vue-cli-service serve",
    "build": "cross-env NODE_ENV=production vue-cli-service build"
  }
}

步驟 3：代碼中訪問(wèn)變量

console.log(process.env.VUE_APP_API_URL);

2. Vue3 項(xiàng)目（基于 Vite）

步驟 1：配置環(huán)境文件

• 創(chuàng)建 .env.localhost,.env.development 和 .env.production 文件：

  # .env.localhost
  VITE_API_URL = http://localhost:3000
  VITE_APP_ENV = 'localhost'
  

  　　

  # .env.development
  VITE_API_URL = http://test.com
  VITE_APP_ENV = 'development'

　　　注意：Vite 默認(rèn)以 VITE_ 開(kāi)頭的變量才會(huì)暴露給客戶端。

步驟 2：修改 package.json（自定義額外變量）

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development vite", //測(cè)試環(huán)境
　  "dev:liMing": "cross-env VITE_USER_ID=158745 vite --mode localhost", // 本地環(huán)境
    "build": "cross-env NODE_ENV=production vite build"
  }
}　

步驟 3：代碼中訪問(wèn)變量

// 本地環(huán)境
console.log(import.meta.env.VITE_API_URL); // http://localhost:3000
console.log(import.meta.env.VITE_USER_ID); // 158745
console.log(import.meta.env.VITE_APP_ENV); // localhost

// 測(cè)試環(huán)境
console.log(import.meta.env.VITE_API_URL); // http://test.com
console.log(import.meta.env.VITE_APP_ENV); // development

3. React 項(xiàng)目（基于 Create React App）

步驟 1：配置環(huán)境文件

• 創(chuàng)建 .env.development 和 .env.production 文件：

  # .env.development
  REACT_APP_API_URL = http://localhost:3000
  

　　　注意：React 要求變量以 REACT_APP_ 開(kāi)頭。

步驟 2：修改 package.json

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

步驟 3：代碼中訪問(wèn)變量

console.log(process.env.REACT_APP_API_URL);

4. Angular 項(xiàng)目

步驟 1：配置環(huán)境文件

在 src/environments 目錄下創(chuàng)建 environment.ts 和 environment.prod.ts：

// environment.ts（開(kāi)發(fā)環(huán)境）
export const environment = {
  production: false,
  API_URL: 'http://localhost:3000'
};

// environment.prod.ts（生產(chǎn)環(huán)境）
export const environment = {
  production: true,
  API_URL: 'https://api.example.com'
};

步驟 2：修改 angular.json

在 angular.json 的 configurations 中指定環(huán)境文件：

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    }
  }
}

步驟 3：代碼中訪問(wèn)變量

import { environment } from '../environments/environment';
console.log(environment.API_URL);

五、常見(jiàn)問(wèn)題與技巧

1. 變量未生效

   • 檢查變量名是否符合框架要求（如 VUE_APP_、REACT_APP_）112。

   • 重啟開(kāi)發(fā)服務(wù)器（環(huán)境變量通常在啟動(dòng)時(shí)加載）。

2. 多環(huán)境擴(kuò)展
   可通過(guò)自定義變量名區(qū)分更多環(huán)境（如 NODE_ENV=staging），并創(chuàng)建對(duì)應(yīng)的 .env.staging 文件12。

3. 安全提示

• 敏感信息（如 API 密鑰）不應(yīng)暴露在前端代碼中，應(yīng)通過(guò)后端服務(wù)中轉(zhuǎn)。

• 生產(chǎn)環(huán)境變量需避免硬編碼，推薦使用 CI/CD 工具動(dòng)態(tài)注入5。

六、總結(jié)

通過(guò) cross-env，開(kāi)發(fā)者可以輕松管理多環(huán)境變量，無(wú)需擔(dān)心跨平臺(tái)兼容性問(wèn)題。無(wú)論是 Vue、React 還是 Angular，核心邏輯均遵循以下步驟：

1. 安裝 cross-env；

2. 配置 package.json 腳本；

3. 創(chuàng)建環(huán)境文件或使用框架內(nèi)置環(huán)境管理；

4. 在代碼中按需讀取變量。

通過(guò)以上方法，即使是初級(jí)開(kāi)發(fā)者也能快速上手多環(huán)境配置，提升開(kāi)發(fā)效率。