doubleyong
管理员
管理员
  • 最后登录2019-08-26
  • 发帖数636
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:238回复:0

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

楼主#
更多 发布于:2019-08-01 10:31
需求:
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});



---------------------
作者:tom_wong666
来源:CSDN
原文:https://blog.csdn.net/tom_wong666/article/details/89763620
知识需要管理,知识需要分享
游客


返回顶部