vue2脚手架,axios的baseURL如何根据环境文件使用,以及使用环境文件的详细步骤,包括如何引入env,最后如何切换环境
时间: 2024-03-10 13:46:15 浏览: 56
在 Vue2 脚手架中,可以通过使用不同的环境文件来配置不同的 baseURL。下面是详细步骤:
1. 创建环境文件
在项目根目录下,可以创建以下三个环境文件:
- `.env`:默认的环境文件,适用于所有情况。
- `.env.development`:用于开发环境。
- `.env.production`:用于生产环境。
在环境文件中,可以添加相应的变量,比如:
```
VUE_APP_API_BASE_URL=http://localhost:8000
```
2. 引入环境文件
在 Vue2 中,默认情况下并不会自动引入环境文件中的变量,需要手动引入。可以在 `main.js` 文件中添加以下代码:
```
import dotenv from 'dotenv'
dotenv.config()
```
这样就可以在应用程序中使用环境变量了。
3. 使用环境变量
在应用程序中,可以通过 `process.env` 来访问环境变量。比如,在使用 axios 时,可以根据不同的环境文件设置不同的 baseURL,如下所示:
```
import axios from 'axios'
const instance = axios.create({
baseURL: process.env.VUE_APP_API_BASE_URL
})
export default instance
```
这样就可以根据不同的环境文件来配置不同的 baseURL,实现不同环境下的 API 调用。
4. 切换环境
在开发过程中,可以通过设置 `NODE_ENV` 变量来切换不同的环境。比如,在使用 `vue-cli-service` 命令启动开发服务器时,可以设置 `NODE_ENV` 变量,如下所示:
```
NODE_ENV=development vue-cli-service serve
```
这样就会自动加载 `.env.development` 文件中的变量,实现开发环境的配置。在构建生产版本时,可以设置 `NODE_ENV` 变量为 `production`,如下所示:
```
NODE_ENV=production vue-cli-service build
```
这样就会自动加载 `.env.production` 文件中的变量,实现生产环境的配置。
阅读全文