process.env 管理 Vue 項目的環境變量（Vue項目中環境變量的配置及調用）

簡述：在構建 Vue 應用時，管理配置是開發中的一個重要部分。不同的環境（如開發、測試和生產）往往需要不同的配置，例如 API、基礎 URL、第三方服務的密鑰等。使用環境變量可以幫助我們更好地管理這些配置。這里將介紹如何在 Vue 項目中使用 `process.env` 來管理環境變量。這里來記錄一下

?什么是 process.env？

process.env 是 Node.js 的一個全局對象，它包含了系統環境變量。這些變量可以在應用程序的運行時訪問，允許開發人員根據不同的環境設置不同的配置。通過使用 process.env 管理環境變量，可以使 Node.js 應用程序的配置更加靈活和安全。

?為什么要在項目中使用環境變量？

環境變量在項目中的使用有多個重要原因，包括安全性、靈活性和配置管理。以下是詳細解釋：

1. 安全性

將敏感信息如 API 密鑰、數據庫密碼和其他機密數據存儲在環境變量中，可以顯著提高應用的安全性。避免將這些敏感信息硬編碼在源代碼中可以減少數據泄露的風險：

避免暴露機密：環境變量使得敏感信息不直接出現在代碼庫中，降低了信息泄露的風險。
保護配置文件：通過環境變量可以避免將敏感配置暴露在版本控制系統中，從而增強了代碼的安全性。

2. 靈活性

環境變量提供了靈活的配置管理方式，使得在不同的環境中使用不同的配置變得更加方便：

無縫切換環境：通過設置不同的環境變量，可以輕松地在開發、測試、預生產和生產環境之間切換，而無需修改代碼。
減少代碼修改：只需更改環境變量而不是修改代碼文件，可以迅速調整配置，以適應不同的需求和環境。

3. 配置管理

環境變量提供了一種統一的配置管理方式，使得應用程序的配置更加可控和一致：

集中管理：將所有環境配置集中在環境變量中，使得管理和維護配置變得更加簡潔和高效。
環境隔離：不同的環境可以有獨立的配置文件，確保在一個環境中的設置不會影響到其他環境。
簡化部署：在部署時，只需根據目標環境加載相應的環境變量文件，從而簡化了配置和部署過程。

?如何在 Vue 項目中使用環境變量？

一. 創建環境文件

在 Vue 項目根目錄下，可以創建多個環境文件，例如：

.env ? ? ? ? ? ? ? ? ? ?????????????????默認環境配置

.env.development ? ? ? ????????開發環境配置

.env.test：? ? ? ? ? ? ? ? ? ? ? ? ? 測試環境配置

.env.staging? ? ? ? ? ? ? ? ? ? ? ? 預生產環境配置

.env.production? ? ? ? ? ? ? ? ? ?生產環境配置

這些文件的內容格式如下：

VUE_APP_API_URL=https://api.example.com

VUE_APP_SECRET_KEY=your_secret_key

這里所有自定義環境變量的名稱必須以 VUE_APP_ 為前綴。Vue CLI 只會嵌入以 VUE_APP_ 為前綴的變量，以確保這些變量不會泄露應用程序運行時所需的其他環境變量。

二. 配置不同環境的變量

根據不同的環境，可以在相應的環境文件中配置不同的變量。例如：

在 .env.development 中：

VUE_APP_API_URL=https://dev.api.example.com

VUE_APP_SECRET_KEY=dev_secret_key

在 .env.test 中：

VUE_APP_API_URL=https://test.api.example.com

VUE_APP_SECRET_KEY=test_secret_key

在 .env.staging 中：

VUE_APP_API_URL=https://staging.api.example.com

VUE_APP_SECRET_KEY=staging_secret_key

在 .env.production 中：

VUE_APP_API_URL=https://api.example.com

VUE_APP_SECRET_KEY=prod_secret_key

三. 在 JS 文件中訪問環境變量

在 Vue 組件或 JavaScript 文件中，可以通過 process.env 對象來訪問這些環境變量。例如：

// 獲取當前環境變量 NODE_ENV 的值，通常用于區分不同的運行環境（如開發、測試、生產）。
const env = process.env.NODE_ENV;console.log(`Running in ${env} mode`);

這里從 process.env 對象中獲取名為 NODE_ENV 的環境變量的值，并將其賦值給 env 變量。這里使用模板字符串打印出當前的運行環境模式。假設 NODE_ENV 的值是 development，這行代碼將輸出 Running in development mode。

四. 啟動應用時加載環境變量

當你啟動 Vue 應用時，Vue CLI 會根據當前環境自動加載相應的環境文件。例如：

npm run serve # 會加載 .env 和 .env.development 文件

npm run build # 會加載 .env 和 .env.production 文件

npm run serve：在開發模式下啟動開發服務器時，Vue CLI 會默認加載 .env 和 .env.development 文件。這些文件中的環境變量會在開發過程中生效，用于配置開發環境所需的參數。
npm run build：在構建生產版本時，Vue CLI 會默認加載 .env 和 .env.production 文件。這些文件中的環境變量會在構建生產版本時生效，用于配置生產環境所需的參數。

當然需要額外配置，為了更好地管理不同環境的啟動命令，我們可以在 package.json 中配置多種啟動命令，這樣可以更方便地在不同環境中啟動和構建應用。以下是詳細的配置方法：

配置 `package.json`

在 package.json 中配置不同環境的啟動和構建命令。使用 cross-env 包來設置 NODE_ENV，以確保在不同操作系統上正確設置環境變量。

首先，安裝 cross-env：

npm install cross-env --save-dev

// 或者

cnpm install cross-env --save-dev

然后，在 package.json 中添加如下腳本：

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

這些命令允許你在不同環境下啟動和構建應用：

npm run serve:dev：啟動開發環境
npm run serve:test：啟動測試環境
npm run serve:staging：啟動預生產環境
npm run serve:prod：啟動生產環境
npm run build:dev：構建開發環境
npm run build:test：構建測試環境
npm run build:staging：構建預生產環境
npm run build:prod：構建生產環境

然后，確保正確加載環境文件

Vue CLI 會根據 NODE_ENV 自動加載相應的環境文件。例如：

如果 NODE_ENV 設置為 development，Vue CLI 會加載 .env 和 .env.development 文件。
如果 NODE_ENV 設置為 test，Vue CLI 會加載 .env 和 .env.test 文件。
如果 NODE_ENV 設置為 staging，Vue CLI 會加載 .env 和 .env.staging 文件。
如果 NODE_ENV 設置為 production，Vue CLI 會加載 .env 和 .env.production 文件。

通過創建不同的環境文件并配置啟動命令，可以在 Vue 項目中輕松管理和加載不同環境的變量。這使得應用程序的配置更加靈活和安全，適用于開發、測試、預生產和生產等不同環境。

五. 使用環境變量配置 Axios 詳細

假設我們使用 Axios 進行 HTTP 請求，可以使用環境變量配置 Axios 的基礎 URL。步驟如下：

1. 安裝 Axios

首先，我們需要安裝 Axios 作為 HTTP 客戶端工具：

npm install axios
// 或者
cnpm install axios

2. 創建 Axios 實例

接下來，我們創建一個 Axios 實例，并配置基礎路徑：

// 該文件目錄：src/utils/request.js// 引入 axios 庫，用于發送 HTTP 請求
import axios from 'axios';// 創建 Axios 實例
const service = axios.create({// ?使用 process.env. 環境變量配置基礎路徑// baseURL 指定了請求的基礎 URL，通常從環境變量中讀取baseURL: process.env.VUE_APP_BASE_API, // 請求超時時間設置為 5000 毫秒（5 秒）timeout: 5000, // 請求超時時間
});// 請求攔截器
service.interceptors.request.use(config => {// 在請求發送之前可以對請求進行配置，如添加請求頭、修改請求參數等// 例如，可以在這里添加認證 tokenreturn config;},error => {// 請求錯誤時，打印錯誤信息console.error('請求錯誤:', error);// 返回一個拒絕的 Promise，以便處理請求錯誤return Promise.reject(error);}
);// 響應攔截器
service.interceptors.response.use(response => {// 在收到響應數據后，可以對響應數據進行處理// 比如，可以在這里處理統一的響應格式return response.data;},error => {// 響應錯誤時，打印錯誤信息console.error('響應錯誤:', error);// 返回一個拒絕的 Promise，以便處理響應錯誤return Promise.reject(error);}
);// 導出 Axios 實例，以便在其他模塊中使用
export default service;

這里在配置baseURL時，直接使用process.env.VUE_APP_BASE_API來設置基本路徑。在啟動開發服務器，運行 npm run serve 時，Vue CLI 會加載 .env 和 .env.development 文件中的環境變量。此時，process.env.VUE_APP_BASE_API 的值會被設置為 .env.development 文件中定義的值，如果 .env.development 中沒有定義，則使用 .env 文件中的值。

3.?創建 `http.js` 文件

并在 src/api 目錄下創建一個 http.js 文件，并添加以下內容：

// 該文件目錄：src/api/http.js// 引入之前創建的 Axios 實例
import request from "@/utils/request";/*** 獲取圖表數據的請求方法* @param {Object} data - 請求數據* @returns {Promise} - 返回一個 Promise 對象*/
export function toDaySituation(data) {return request({url: '/res/situation/overview', // API 端點，指定了請求的路徑method: 'post', // 請求方法，表示使用 POST 請求data // 請求數據，傳遞給 API 的請求體});
}

4.?在組件中調用請求方法

接下來，我們在組件中調用 callModelType方法，來請求圖表數據并處理響應。例如：

// 請入請求數據的函數
import { toDayModeltype } from '@/api/http.js';methods: {// 模型類型事件callModelType(value) {// 設置加載狀態為 truethis.tableLoading = true;// 調用 PatchList 方法并傳遞參數toDayModeltype(this.modelParams, this.params).then((res) => {// 處理請求成功的情況if (res.code === 200) {// 設置延遲以模擬異步操作setTimeout(() => {this.tableLoading = false; // 將加載狀態設置為 false}, 100);// 賦值操作，將獲取的數據保存到變量const data = res.rows;     }}).catch(() => {// 處理請求失敗的情況this.tableLoading = false; // 將加載狀態設置為 false}).finally(() => {// 無論請求成功還是失敗，都會執行這里的代碼this.tableLoading = false; // 將加載狀態設置為 false});},},created() {// 組件創建時調用 callModelType方法this.callModelType();
},

六. 在組件中使用環境變量

在 Vue 組件中，可以直接使用環境變量。例如：

<template><div><!-- 顯示 API URL --><p>API URL: {{ apiUrl }}</p></div>
</template><script>
export default {data() {return {// 從環境變量中讀取 API URLapiUrl: process.env.VUE_APP_API_URL, // 讀取環境變量 VUE_APP_API_URL 的值};},
};
</script>