我来帮你分析Vue项目中环境变量的使用和切换机制。让我先查看项目的配置文件结构。
.env.development
在工作区搜索 '*.env*'
.env.production
在工作区搜索 'package.json'
package.json
在工作区搜索 'vue.config.js'
vue.config.js
在工作区搜索 '**/.env*'
在工作区搜索 'src/**/*'
src\api\baseURL.js
src\utils\request.js
现在让我查看一下是否有其他的环境配置文件，并搜索项目中如何使用环境变量：
在工作区搜索 '**/.env*'
在工作区搜索 'process\.env\.'
在工作区搜索 'process\.env\.VUE_APP_'
在工作区搜索 'process\.env\.ENV'
基于你的项目分析，我来详细解答Vue项目中环境变量的使用和切换机制：
## 什么时候用.env.production，什么时候用.env.development
### .env.development (开发环境)
使用场景：
- 本地开发调试
- 功能开发阶段
- 接口联调阶段
- 需要详细错误信息和调试功能
你的项目中的配置：
```
# 页面标题
VUE_APP_TITLE = 消防平台
# 开发环境配置
ENV = 'development'
# API基础路径
VUE_APP_BASE_API = '/api'
# 开发环境服务器地址
VUE_APP_URL='http://59.203.187.
199:8199'
VUE_APP_CODEURL='http://59.203.187.
199:7000'
```
### .env.production (生产环境)
使用场景：
- 项目正式部署上线
- 线上环境测试
- 性能优化阶段
- 用户正式使用
你的项目中的配置：
```
# 页面标题
VUE_APP_TITLE = 消防平台
# 生产环境配置
ENV = 'production'
# API基础路径
VUE_APP_BASE_API = '/api'
# 生产环境服务器地址（注意：这里和开发环境
配置相同，通常需要调整）
VUE_APP_URL='http://59.203.187.
199:8199'
VUE_APP_CODEURL='http.://59.203.187.
199:7000'
```
## 通过哪些代码实现切换
### 1. CLI命令切换
开发环境：
```
npm run serve
# 或者
vue-cli-service serve
```
这会自动加载 .env.development 文件
生产环境：
```
npm run build
# 或者
vue-cli-service build
```
这会自动加载 .env.production 文件
### 2. package.json 中的脚本
你的项目中的脚本：
```
{
"scripts": {
"serve": "vue-cli-service
serve", // 使用.env.
development
"build": "vue-cli-service
build", // 使用.env.
production
"lint": "vue-cli-service lint"
}
}
```
### 3. Vue CLI 自动识别机制
Vue CLI会根据运行的模式自动选择对应的环境文件：
- serve 命令 → .env.development
- build 命令 → .env.production
### 4. 项目中使用环境变量的代码示例
在 Vue 组件中使用：
```
// 获取API基础路径
const apiBaseUrl = process.env.
VUE_APP_BASE_API;
// 在上传组件中使用
actionUrl: process.env.
VUE_APP_BASE_API + "/common/upload"
```
在 vue.config.js 中使用：
```
const { defineConfig } = require
('@vue/cli-service')
module.exports = defineConfig({
// ...其他配置
devServer: {
proxy: {
[process.env.VUE_APP_BASE_API]
: {
target: `http://8.163.71.
245:8076`,
changeOrigin: true,
pathRewrite: {
["" + process.env.
VUE_APP_BASE_API]: "",
},
},
},
},
})
```
## 打包后是什么情况
### 1. 环境变量的注入过程
开发环境：
- 环境变量在运行时通过 Node.js 注入到前端代码中
- 可以通过浏览器开发者工具查看 process.env 对象
生产环境：
- 环境变量在构建时被静态替换
- 打包后的代码中， process.env.VUE_APP_* 会被直接替换为对应的值
- 运行时无法再修改这些值
### 2. 构建后的文件结构
```
dist/
├── index.html # 入口HTML文件
├── static/ # 静态资源
│ ├── js/
│ │ ├── app.abc123.js # 应用代码（包含环境变量替换）
│ │ └── chunk.abc123.js # 代码分割文件
│ └── css/
│ └── app.abc123.css
```
### 3. 环境变量在构建后的体现
开发环境构建后：
```
// 构建后的代码中
const apiBaseUrl = '/api'; // 直接
替换为.env.development中的值
```
生产环境构建后：
```
// 构建后的代码中
const apiBaseUrl = '/api'; // 直接
替换为.env.production中的值
```
### 4. 区别和注意事项
你的项目需要注意的问题：
1. 配置不一致问题：
- 当前 .env.development 和 .env.production 中的服务器地址配置相同
- 建议根据实际需求调整生产环境的服务器地址
2. API路径配置：
- 项目中实际使用的是 baseURL.js 文件中的硬编码地址
- 建议统一使用环境变量来管理API地址
3. 最佳实践：
```
# 建议的生产环境配置
VUE_APP_TITLE = 消防平台-生产版
ENV = 'production'
VUE_APP_BASE_API = '/api'
VUE_APP_URL='https://api.
your-domain.com' # 生产环境使用
HTTPS
VUE_APP_CODEURL='https://code.
your-domain.com'
```
## 总结
- 开发环境 ：使用 .env.development ，适合本地开发和调试
- 生产环境 ：使用 .env.production ，适合线上部署
- 切换机制 ：通过 npm run serve 和 npm run build 命令自动切换
- 打包后 ：环境变量被静态替换，无法再动态修改
- 使用方式 ：通过 process.env.VUE_APP_* 访问环境变量
这种机制让同一套代码可以在不同环境下使用不同的配置，非常适合开发、测试、生产等多环境部署需求。
