环境变量

前端开发的3个环境变量（不只是有3个）
image.png

自己定义的环境变量（最好以VUE_APP开头）
image.png
环境变量的应用 比如说设置ajax的访问基地址（开发环境和生产环境的基地址是不一样的）

配置基地址

image.png

如上图配置基地址 可以在上面的3种环境下（也就是3个文件中配置不同的基地址） 通过不同环境命令来自动
让项目使用不同的基地址（命令在packjson中就可以查看）

举例

image.png

重点 环境变量的使用规则

在不同的环境文件中设置不同的基地址， 这样就有不同的基地址了。 项目运行那个基地址是通过不同的运行命令来选择的 比如说 你在上面3个环境中都设置了不同的基地址 运行npm run dev 它就会执行开发环境文件中你设置的基地址运行 npm run build:prod 就是执行你生产环境文件设置的基地址（这个命令是看package.json来确定的）
也就是说在不同的文件中配置不同的基地址，使用不同的项目启动命令，那么发送axios的基地址就会不同
因为是基地址的设置，那么也就是设置在request.js中，也就是封装axios的文件中，如下图 baseURL: process.env.VUE_APP_BASE_API
f
baseURL:就是基地址的意思 process.env可以自动收集所有的环境变量
process.env 后面跟着的就是我们定义的基地址的属性名（通过启动不同环境的命令 ，让这个基地址不同，来达到在不同环境下使用不同的基地址）
image.png

跨域问题的解决

跨域问题的原因

跨域问题的出现原因 就是浏览器的同源策略和请求是ajax请求
image.png
image.png
image.png

前端的解决办法就是采用代理转发（来解决跨域）
原则就是前端项目和代理服务器是同源的（也就是协议，域名和端口是一样的）
image.png

解决跨域问题的步骤？

步骤1 配置基地址 （本案例发现是api，实际工作中，发现除了基地址，那个是每一个接口都有的可以 把其设置成开发环境下的基地址 如下图/api，前面的基地址不写，则，它运行默认就是和项目的基地址一样，首先，先解决了项目和代理服务器之间就不跨域了 ）
注意这个时候配置的基地址就不是后端的基地址了，配置的是代理服务器的基地址，代理服务器在指向后端
基地址（是这样的一个过程实现）
1.举例 发现一个项目中接口开头都是api开头的，那么我们在这个时候，可以利用这个api 设置成代理服务器的基地址
配置基地址可以通过环境变量来设置 也就是说写到下面的文件中（开发文件中）如下图只设置api，那么这个请求也是发到和项目地址一样的地址上——————》如上图
image.png

image.png

步骤2（设置代理服务器）

在vue.config.js中的devServer 中设置代理服务器 如下图
image.png
image.png

代理服务器解决跨域的实现原理

监听一个请求地址是api打头的，如果是api打头的那么就触发代理的机制
target ：指向真正的后端接口地址（就让代理服务器把ajax请求发送到target后面的后端服务器）
服务器和服务器之间不存在跨域