配置 vue cli 环境变量
时间: 2024-06-20 14:02:14 浏览: 14
在Vue CLI项目中,环境变量通常用于设置不同的环境配置,例如开发环境、生产环境的API地址等。以下是如何配置Vue CLI项目的环境变量:
1. **安装`dotenv`包**(可选):如果你需要管理外部环境变量文件(`.env`或`.env.local`),你可以使用`dotenv`库。首先,在终端中运行:
```
npm install dotenv --save-dev
```
2. **创建环境变量文件**:在项目根目录下创建一个名为`.env`(或`.env.development`和`.env.production`分别对应开发和生产环境)的文件,用`=`分隔键值对,如:
```env
API_URL=http://localhost:8080
```
3. **使用环境变量**:在`vue.config.js`中,你可以读取这些环境变量:
```javascript
// vue.config.js
const Dotenv = require('dotenv').config({ path: process.env.NODE_ENV === 'production' ? '.env.production' : '.env' });
module.exports = {
devServer: {
proxy: {
'/api': { target: process.env.API_URL, ... }
}
},
};
```
这里`process.env.API_URL`会根据当前环境(开发或生产)自动替换为`.env`文件中的相应值。
4. **区分环境**:如果你希望在不同环境有不同的配置,可以在`vue.config.js`中根据`NODE_ENV`变量动态设置:
```javascript
if (process.env.NODE_ENV === 'production') {
// 生产环境配置
} else {
// 开发环境配置
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)