美文网首页vue
VUE中通过process.env判断开发,测试和生产环境,并分

VUE中通过process.env判断开发,测试和生产环境,并分

作者: 来碗鸡蛋面 | 来源:发表于2019-08-01 21:35 被阅读68次

    原创声明

    本文系作者辛苦码字所得,欢迎分享和转载,但请在明显位置注明作者的如下信息:
    笔名:来碗鸡蛋面
    简书主页: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});
    

    相关文章

      网友评论

        本文标题:VUE中通过process.env判断开发,测试和生产环境,并分

        本文链接:https://www.haomeiwen.com/subject/pplhdctx.html