【金秋打卡】第13天 配置环境变量 axios 使用

课程名称：基于Vue3最新标准，实现后台前端综合解

课程章节： 第一章

课程讲师：Sunday

课程内容

     在当前这个场景下，我们希望封装出来的 axios 模块，至少需要具备一种能力，那就是：根据当前模式的不同，设定不同的 BaseUrl ，因为通常情况下企业级项目在 开发状态 和 生产状态 下它的 baseUrl 是不同的。

 对于 @vue/cli 来说，它具备三种不同的模式：

1. development

2. test

3. production

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve

test 模式用于 vue-cli-service test:unit

production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

 当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。

NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。

 我们可以在项目中创建两个文件：

 .env.development

.env.production

它们分别对应 开发状态 和 生产状态。

# 标志
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api'

# 标志
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'

接下来就是安装 axios

npm install axios

创建 utils/request.js ，写入如下代码：

import axios from 'axios'const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
  })
export default service