注意事项:
- 环境变量必须以 VUE_APP_ 开头,只有 VUE_APP_ 开头的变量才会被 webpack 处理
- NODE_ENV 是内置的环境变量,NODE_ENV 不需要 VUE_APP_ 前缀
- 修改环境变量后需要重启开发服务器才能生效
- 环境变量在构建时会被静态替换
- 环境变量在客户端代码中可见,不要存储敏感信息
基础配置demo
// .env
VUE_APP_API_URL=https://api.example.com
// .env.development
VUE_APP_API_URL=http://localhost:8080
// .env.production
VUE_APP_API_URL=https://prod.example.com
文件命名规则
.env # 所有环境都会加载
.env.local # 所有环境都会加载,但会被git忽略
.env.development # 开发环境加载
.env.production # 生产环境加载
使用方式
// 在 Vue 组件中使用
console.log(process.env.VUE_APP_API_URL)
console.log(process.env.NODE_ENV) // "development" 或 "production"
// 在配置文件中使用
export default {
baseUrl: process.env.VUE_APP_API_URL
}
//比如使用环境变量修改当前页面的标题
document.title=process.env.VUE_APP_TITLE