vue 如何配置使用 env文件

在 Vue 项目中，.env 文件用于管理不同环境下的配置变量，比如 API 地址、端口号、密钥等。Vue CLI 3+ 内置了对 .env 文件的支持，下面为你详细介绍如何配置和使用。

1. .env 文件的命名规则

Vue CLI 会根据不同的环境加载对应的 .env 文件，具体规则如下：

• .env：所有环境都会加载
• .env.development：开发环境（npm run serve）
• .env.production：生产环境（npm run build）
• .env.test：测试环境
• .env.local：本地环境配置（会被 git 忽略）
• .env.development.local：开发环境的本地配置

2. .env 文件的格式

.env 文件采用 KEY=VALUE 的格式，每行一个变量，例如：

# 基础配置
NODE_ENV=production
VUE_APP_TITLE=My App# API 配置
VUE_APP_API_URL=https://api.example.com
VUE_APP_TIMEOUT=5000# 第三方服务密钥
VUE_APP_GOOGLE_MAPS_KEY=your_google_maps_key

3. 环境变量的访问方式

在 Vue 项目中，环境变量需要以 VUE_APP_ 为前缀才能被应用代码访问，例如：

// 在组件中访问环境变量
export default {created() {console.log(process.env.VUE_APP_TITLE);console.log(process.env.VUE_APP_API_URL);}
}// 在模板中使用
<template><div>{{ process.env.VUE_APP_TITLE }}</div>
</template>

4. 特殊的环境变量

除了自定义的环境变量，Vue CLI 还提供了一些内置的环境变量：

• NODE_ENV：环境模式（development、production 或 test）
• BASE_URL：应用部署的基础路径，对应 vue.config.js 中的 publicPath

5. 配置示例

下面是一个完整的配置示例：

.env.development（开发环境）

NODE_ENV=development
VUE_APP_TITLE=My App - Development
VUE_APP_API_URL=http://localhost:3000/api
VUE_APP_DEBUG=true

.env.production（生产环境）

NODE_ENV=production
VUE_APP_TITLE=My App
VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG=false

6. 在 vue.config.js 中使用环境变量

在 vue.config.js 中，可以直接访问 .env 文件中的变量，无需添加 VUE_APP_ 前缀：

// vue.config.js
module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',devServer: {proxy: {'/api': {target: process.env.VUE_APP_API_URL,changeOrigin: true}}}
}

7. 加载优先级

环境变量的加载遵循以下优先级（后面的会覆盖前面的）：

1. .env
2. .env.local（仅在非测试环境加载）
3. .env.{mode}
4. .env.{mode}.local

8. 注意事项

• 环境变量在构建时会被静态替换，所以在运行时无法动态修改
• 不要在 .env 文件中存储敏感信息（如密码、密钥等），除非你确定这些文件不会被提交到版本控制
• 可以通过 .gitignore 文件忽略本地环境配置文件：

  .env.local
  .env.development.local
  .env.test.local
  .env.production.local
  

通过合理配置 .env 文件，你可以轻松管理不同环境下的配置，使项目开发和部署更加灵活高效。