什么是环境变量
前端项目启动时占用的端口号是在 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是属性
根据执行指令的不同这里的环境变量的值也对应发生改变，因为这个变量分别有生产环境和开发环境两个值
网友评论