VUE中通过process.env判断开发，测试和生产环境，并分环境配置不同的URL HOST

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

需求：

VUE开发前端项目，需要分环境配置URL和做相关处理

思路：通过process.env做判断和处理

实现一：环境区分

1，找到项目配置文件夹：
config文件夹
2，进入如下三个文件：
dev.env.js 对应开发环境
test.env.js 对应测试环境
prod.env.js 对应生产环境
找到如下代码：

// 开发环境
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
})

// 测试环境
module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
})

// 生产环境
module.exports = {
  NODE_ENV: '"production"',
}

3，你的NODE_ENV字段值不一定跟我一样，但是这个标记就是环境标识,我现在组件里面打印一下结果，给大家看下:

  mounted() {
    console.log(process.env.NODE_ENV)；
    // 打印结果
    // 开发环境‘development’
    // 测试环境‘testing’
    // 生产环境‘production’
  }

如果你想在组件中分环境处理相关方法，可以像这样用:

if(process.env.NODE_ENV === 'development') {
    // 开发环境相关特殊方法
}
if(process.env.NODE_ENV === 'testing') {
    // 测试环境相关特殊方法
}
if(process.env.NODE_ENV === 'production') {
    // 生产环境相关特殊方法
}

实现二：分环境配置不同的URL HOST

1，基本实现思路：把不同环境的HOST配置在config对应环境的配置中，在main.js中往VUE组件的原型对象中添加baseURL属性，然后所有的组件都可以引用到；
2，代码实现：
(1)，找到项目配置文件夹：
config文件夹
(2)，进入如下三个文件：
dev.env.js 对应开发环境
test.env.js 对应测试环境
prod.env.js 对应生产环境
在如下代码中添加对应环境的HOST：
这里注意：
与普通script标签中的语法不同，这里如果是字符串是双层引号，如果是变量是单层引号!!!

// 开发环境
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"开发环境host：wwww.baidu.com"',
})

// 测试环境
module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  API_ROOT: '"测试环境host：wwww.baidu.com"',
})

// 生产环境
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"生产环境host：wwww.baidu.com"',
}

(3)在main.js中加入如下设置：

Object.defineProperties(Vue.prototype, {
  // 注册不同环境的HOST为vue的原型对象属性，名称为baseURL
  baseURL: {
    value: process.env.API_ROOT,
    writable: false
  }
})

(4)在组件中使用：

const res = await this.$http.post(`${this.baseURL}/main.php?cid=${this.num});

最后编辑于：2019.08.04 00:12:09