环境变量

什么是环境变量

 前端项目启动时占用的端口号是在 vue.config.js 中定义的

vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack，相当于在webpack的基础上又做了一次抽象。官网地址： https://cli.vuejs.org/zh/

开发环境服务端口的在vue.config.js中 位置

process.env.port 实际上是一个 node.js服务下的环境变量

环境变量的配置文件

环境变量的配置文件

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

定义环境变量

key=value    key表示环境变量的名称       value表示环境变量的值

定义开发环境下的环境变量 定义生产环境下的环境变量 定义模拟生产环境下的环境变量

我们不难发现，在定义时的名称我们都以VUE_APP_开头,这个开头的变量将通过 webpack.DefinePlugin 静态的嵌入到客户端侧的代码中，所以建议以它开头来定义。

使用环境变量

定义好环境变量之后，项目启动后，它会自动集成到 process.env 这个属性中，我们只需要通过以下方式使用即可

                          process.env.环境变量的名字

并且要注意，修改配置文件，想要生效的话，必须要重启服务

---

环境变量-配置不同的请求基地址

在项目开发的不同阶段，很可能要请求不同的基地址，例如：

在开发阶段，所有ajax请求要发到地址a；

在上线之后，所有ajax请求要发到地址b。

①配置

开发环境的基础地址   自己写的假网址为例

 VUE_APP_BASE_API='http://ihrm-java.zangsan.net/api'    

生产环境的基础地址

 VUE_APP_BASE_API='http://ww.xxx.com/prod-api'    

②使用环境变量

将axios创建的实例中的baseURL的值定为  process.env.VUE_APP_BASE_API（仔细看这里的书写格式就是process.env.环境变量的名字）这里的环境变量的名字就是以VUE_APP_开头的VUE_APP_BASE_API      process.env是属性

根据执行指令的不同这里的环境变量的值也对应发生改变，因为这个变量分别有生产环境和开发环境两个值