在开发 Web 应用时，我们常常需要根据不同的环境（如开发、测试、生产）进行不同的配置。
Vue 3 提供了灵活的环境变量配置机制，让我们可以轻松管理这些差异。
接下来，我将详细介绍如何在 Vue 3 项目中配置和使用环境变量。🌟
环境变量文件
在 Vue 3 项目中，我们可以使用多个环境变量文件来管理不同环境下的配置。这些文件通常放在项目根目录下，文件名格式为 .env、.env.development、.env.production 等。
基础环境变量文件
创建 .env 文件，用于存储所有环境通用的变量：
# .env VUE_APP_TITLE=My Vue App
开发环境变量文件
创建 .env.development 文件，用于存储开发环境下的变量：
# .env.development VUE_APP_API_URL=http://localhost:3000/api
生产环境变量文件
创建 .env.production 文件，用于存储生产环境下的变量：
# .env.production VUE_APP_API_URL=https://api.myapp.com
在代码中使用环境变量
在 Vue 3 项目中，我们可以通过 import.meta.env 访问环境变量。接下来，我们在组件中演示如何使用这些变量。
<!-- src/components/EnvInfo.vue --> <template> <div> <h1>{{ title }}</h1> <p>API URL: {{ apiUrl }}</p> </div> </template> <script setup> const title = import.meta.env.VUE_APP_TITLE; const apiUrl = import.meta.env.VUE_APP_API_URL; </script> <style scoped> h1 { color: #42b983; } </style>
在构建过程中使用环境变量
除了在代码中使用环境变量，我们还可以在构建过程中根据不同的环境变量进行特定的操作。例如，可以根据环境变量配置不同的插件或优化选项。
Vite 配置
在使用 Vite 构建工具时，我们可以在 vite.config.ts 文件中访问环境变量：
// vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], define: { 'process.env': { VUE_APP_TITLE: JSON.stringify(process.env.VUE_APP_TITLE), VUE_APP_API_URL: JSON.stringify(process.env.VUE_APP_API_URL), }, }, });
使用 .env.local 文件
有时我们需要在本地进行一些特定配置，这些配置不希望提交到版本控制系统中。此时可以使用 .env.local 文件：
# .env.local
VUE_APP_LOCAL_CONFIG=Local Config Value
确保将 .env.local 添加到 .gitignore 中：
# .gitignore
.env.local
环境变量最佳实践
- • 命名规范：所有自定义的环境变量名必须以
VUE_APP_开头，这是为了避免与系统变量冲突。 - • 安全性：不要在环境变量中存储敏感信息，如密码、私钥等。这些信息应通过其他安全方式管理。
- • 类型转换：环境变量默认是字符串类型。如果需要其他类型（如数字、布尔值），请手动转换。
示例：使用布尔类型的环境变量
# .env VUE_APP_FEATURE_FLAG=true <!-- src/components/FeatureFlag.vue --> <template> <div v-if="isFeatureEnabled"> <p>New feature is enabled!</p> </div> </template> <script setup> const isFeatureEnabled = import.meta.env.VUE_APP_FEATURE_FLAG === 'true'; </script> <style scoped> p { color: #42b983; } </style>
部署时的环境变量配置
在实际部署中，我们通常会使用 CI/CD 工具来自动化部署流程。在部署过程中，可以根据不同的环境注入相应的环境变量。
示例：使用 GitHub Actions 配置环境变量
在 .github/workflows/deploy.yml 文件中，我们可以配置环境变量：
name: Deploy on: push: branches: - main jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Setup Node.js uses: actions/setup-node@v2 with: node-version: '14' - name: Install dependencies run: npm install - name: Build project run: npm run build env: VUE_APP_API_URL: ${{ secrets.PRODUCTION_API_URL }} - name: Deploy to server run: echo "Deploying..."
在 GitHub 仓库中设置 PRODUCTION_API_URL 秘密变量，以确保部署过程中使用正确的 API URL。
总结
合理使用环境变量可以使我们的项目更具灵活性和可维护性。
