1.认识环境变量

1.1 环境变量的配置文件

在项目运行的过程中，通过不同的命令，能自动加载不同的配置文件，从而获取不同的环境变量。

1.2 端口配置

项目启动时，占用的端口号，在vue.config.js中配置。

vue.config.js：是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，相当于在webpack的基础上又做了一次抽象。

// **`process.env.port`**实际上是一个nodejs服务下的环境变量

const port = process.env.port || process.env.npm_config_port || 9528 

1.3 使用场景 - 配置不同的请求基地址

在项目开发阶段和项目上线阶段，可能需要请求不同的基地址，为了方便切换，我们可以通过设置环境变量，实现自动切换。

1.3.1 配置

.env.devlopment

# 开发环境的基础地址
VUE_APP_BASE_API = 'http://ihrm-java.itheima.net/api'

.env.production

# 生产环境的基地址
VUE_APP_BASE_API = 'http://www.xxx.com/prod-api'  

1.3.2 使用

设置好环境变量并启动项目以后，它会被自动集成到process.env这个属性中，我们只需要通过 porcess.env.环境变量名 使用即可

const service = axios.create({
  // baseURL: 'http://ihrm-java.itheima.net'
  baseURL: process.env.VUE_APP_BASE_API
})

2.切换请求基地址到本地服务器出现跨域问题

2.1 场景

1.将 .env.development 中的基地址修改为本地服务器

# base api
VUE_APP_BASE_API = 'http://localhost:3000/api'

 2.启动mongodb服务，npm run serve 运行后端服务器

3.查看页面，出现跨域错误。（跨域错误本质问题出现在浏览器，而不是服务器，服务器是可以顺利收到请求的）

2.2 如何判断跨域请求

在 发起请求的页面地址 向 要请求的目标地址 发起请求时 ，如果这两个地址在 协议、域名、端口 不全相同，则说明请求是跨域的

2.3 跨域请求报错的原因

① 浏览器的同源策略

② 请求是ajax类型

2.4 解决方案

1 前端用JSONP方式去发请求

2 后端写代码（cors）在响应中添加必要的响应头，让响应回来之后浏览器不报错

3.代理转发

在前端服务器和后端接口服务器之间架设一个中间代理服务，他的地址保持和前端服务一致。

分析：

① 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求

② 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题， vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

解决步骤：

1. 在vue.config.js 配置文件中

devServer: {
    // ... 省略
   // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }

2. 在 .env.development 中修改基地址

# VUE_APP_BASE_API = 'http://localhost:3000/api'  (这句不要了)
VUE_APP_BASE_API = '/api'

最后，修改完配置文件后，npm run dev 重启项目，查看登陆界面，发现跨域问题已经解决