在 Vue 項目中，.env 文件用于存儲環境變量，不同的環境（如開發環境、測試環境、生產環境）可以使用不同的 .env 文件來管理對應的配置信息。以下是關于 Vue 項目中 .env 文件的詳細使用方法：
1. 項目創建
確保你已經使用 Vue CLI 創建了一個 Vue 項目。如果還沒有創建，可以使用以下命令創建一個新的 Vue 項目：
vue create my-vue-project
cd my-vue-project
2. .env 文件的命名規則
Vue CLI 支持多種 .env 文件命名，以適應不同的環境需求：
.env：所有環境都會加載的通用配置。.env.development：開發環境（npm run serve）加載的配置。.env.production：生產環境（npm run build）加載的配置。.env.test：測試環境加載的配置。
3. 定義環境變量
在相應的 .env 文件中，按照 VUE_APP_ 前綴的格式定義環境變量，例如：
.env.development
VUE_APP_API_BASE_URL = http://localhost:3000/api
VUE_APP_DEBUG = true
.env.production
VUE_APP_API_BASE_URL = https://example.com/api
VUE_APP_DEBUG = false
注意：只有以 VUE_APP_ 開頭的變量才會被 Vue CLI 注入到項目中。
4. 在項目中使用環境變量
在 Vue 項目中，可以通過 process.env 對象來訪問定義的環境變量。
- 在 Vue 組件中使用
<template><div><p>API Base URL: {{ apiBaseUrl }}</p><p>Debug Mode: {{ debugMode }}</p></div>
</template><script>
export default {data() {return {apiBaseUrl: process.env.VUE_APP_API_BASE_URL,debugMode: process.env.VUE_APP_DEBUG};}
};
</script>
- 在 JavaScript 文件中使用
// src/services/api.js
const apiBaseUrl = process.env.VUE_APP_API_BASE_URL;export function fetchData() {return fetch(`${apiBaseUrl}/data`).then(response => response.json());
}
5. 加載不同環境的配置
根據啟動命令的不同，Vue CLI 會自動加載相應的 .env 文件：
- 開發環境：運行
npm run serve時，會加載.env和.env.development文件，.env.development文件中的配置會覆蓋.env中同名的配置。 - 生產環境：運行
npm run build時，會加載.env和.env.production文件，.env.production文件中的配置會覆蓋.env中同名的配置。
6. 自定義環境
除了默認的開發和生產環境，你還可以自定義環境。例如，創建一個 .env.staging 文件用于預發布環境：
VUE_APP_API_BASE_URL = https://staging.example.com/api
VUE_APP_DEBUG = false
然后，在 package.json 中添加自定義腳本：
{"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","build:staging": "vue-cli-service build --mode staging"}
}
運行 npm run build:staging 時，會加載 .env 和 .env.staging 文件。
7. 注意事項
- 安全性：不要在
.env文件中存儲敏感信息（如數據庫密碼、API 密鑰等），如果需要存儲敏感信息，可以考慮使用環境變量注入或加密存儲。 - 重啟服務：修改
.env文件后，需要重新啟動開發服務器或重新構建項目，新的環境變量才能生效。
