美文网首页
vue 封装全局请求地址

vue 封装全局请求地址

作者: 郭先森啊 | 来源:发表于2023-03-12 09:47 被阅读0次
    关注公众号【Miles】查看更多技术文档

    【若项目中存在 sso文件,将sso文件中window.context = {}各项置空 = ""】

    一、建立.env系列文件

    首先我们在根目录新建3个文件,分别为.env.development,.env.production,.env.test
    注意文件是只有后缀的。
    .env.development 模式用于serve,开发环境,就是开始环境的时候会引用这个文件里面的配置
    .env.production模式用于build,线上环境。
    .env.test 测试环境


    1628230904(1).png
    二、修改文件

    分别在文件内写上:

    1.开发环境

    //.env.development 
    NODE_ENV = 'development'
    VUE_APP_BASE_API = 'http://+需要请求API'
    

    2.线上环境

    //.env.production
    NODE_ENV = 'production'
    VUE_APP_BASE_API = 'http://+需要请求API'
    

    3.测试环境

    //.env.test
    NODE_ENV = 'tes'
    VUE_APP_BASE_API = 'http://+需要请求API'
    
    三、更改request.js文件

    当需要用到该变量是可以用process.env.VUE_APP_BASE_API进行取值。

    例如:

    let requestData = {
        url: process.env.VUE_APP_BASE_API + data.url,
        data: reqData,
        method: data.method || "GET",
        params: data.params || {},
        onUploadProgress: data.onUploadProgress || null,
        headers: data.headers || "",
        responseType: data.responseType || "json"
    }
    

    相关文章

      网友评论

          本文标题:vue 封装全局请求地址

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