vue 项目中的环境变量配置

项目的开发和生产的一些变量可能会不一样，比如：ip地址、端口号、某些规则编号等，发布生产环境时，需要手动把开发环境的ip地址换成生产环境的，本地开发维护时，还要再换回来，比较麻烦；所以动态配置这些变量，会方便一点，利用全局环境变量属性process.env。

方法一：在配置文件里设置

1.配置文件

​ 文件1: .env 全局默认配置文件

VUE_APP_BASE_URL="http:178xxxxx";
VUE_APP_GORA_URL="http:178xxxxx";

​ 文件2： .env.development 开发环境下的配置文件

//开发环境下的地址
VUE_APP_BASE_URL="http:192xxxxx";
VUE_APP_GORA_URL="http:192xxxxx";

​ 文件3： .env.production 生产环境下的配置文件

//生产环境下的配置
VUE_APP_BASE_URL="http:178xxxxx";
VUE_APP_GORA_URL="http:178xxxxx";

2.命名规则

命名必须以VUE_APP_开头！！！

3.加载顺序

// npm run serve ：先加载.env  再加载.env.development
// npm run build ：先加载.env  再加载.env.production
// 后加载的会覆盖先加载的文件
// (启动服务和打包的命令，不同项目命令根据配置可能不一样)

4.vue 中使用

let baseUrl = process.env.VUE_APP_BASE_URL   //全局的process

方法二：js 或vue文件中配置，在哪用在哪配

let baseUrl = ""
if (process.env.NODE_ENV == 'development') {
    console.log("开发版本")
	baseUrl = "http:xxxxx"
} else if (process.env.NODE_ENV == 'production') {
    console.log("上线版本");
	baseUrl = "http:xxxxxx"
}