简单记录一下vue的http请求配置相关

测试环境请求接口设置:
  1.  config/dev.env.js添加:
    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_ROOT: '"http://"', //配置http请求头
    })

  2. config/index.js 配置:
    dev: {
      proxyTable: {
        //设置代理,连接后台地址
        '/api': {
          target: , "http://"// 目标接口
          pathRewrite: { '^/api': '' }, // 替换对应标识符,非必需
        },
      },
    }

  3.  在使用axios请求时:设置默认:axios.defaults.baseURL

之前设置的时候因为没有理解透,导致虽然设置了以上的步骤,但是还是没有搞定,于是搜索,就有了下面这个不算特别好的方法

  1. axios请求拦截:设置请求接口,可以在axios请求时,拦截请求修改;

    1. 在config/dev.env.js中配置完接口后进行配置
      //设置axios 拦截配置
      var root = process.env.API_ROOT;
      axios.interceptors.request.use((config) => {
        //请求之前重新拼装url
        config.url = root + config.url;
        return config;
      })

这个axios的配置是因为我单独将axios的请求方法重新封装成了一个http.js文件写在里面的,具体细节可能会有差别

vue请求简单配置的更多相关文章

  1. vue axios简单配置

    参考:https://www.cnblogs.com/sophie_wang/p/7844119.html 1. 安装 npm install axios 2. main.js import axio ...

  2. Vue router简单配置入门案例

    { 注意驼峰命名法,不然会报错 } 1.在Views文件夹下创建Vue路由文件,例如: <template> </template>  <script> </ ...

  3. axios在vue中的简单配置与使用

    一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/ ...

  4. Vue + webpack 项目配置化、接口请求统一管理

    准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题.  又或者后面其他同事接手你的模块,或者改你的bug ...

  5. 简单配置Vue路由

    简单配置Vue路由 1.  创建一个单文件组件Test.vue <template> <div>Test</div> </template> <s ...

  6. 简单配置nginx反向代理,实现跨域请求

    简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...

  7. react构建淘票票webapp,及react与vue的简单比较。

    前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...

  8. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  9. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

随机推荐

  1. java 查找数组中最接近的一个数字

    public static Integer getNumberThree(Integer[] intarray,Integer number){ int index = Math.abs(number ...

  2. php 对接微信接口 {"errcode":41001,"errmsg":"access_token missing hint

    这里是针对所有token微信都有这种机制 1.token被多次访问无效 访问微信接口->得到token,缓存起来2小时内有效,期间2小时内每次都取缓存即可,不必每次都去微信那边兑换 问题:缓存期 ...

  3. spring的multipartResolver和java后端获取的MultipartHttpServletRequest方法对比

    这两天在用spring进行上传上遇到问题,今天进行了问题的排查,这个过程也增加了我看spring源码的兴趣!还是很有收获的! 首先先给A组提供了上传接口,并没有在spring的配置文件进行multip ...

  4. CobaltStrike3.14破解

    原文发布在:https://bithack.io/forum/310 8月6日已更新 之前发的是5月2号破解的,并且官方作者的exit暗桩没有去掉.看到很多人用此版本遇到问题,抽空修复了下bug.此版 ...

  5. JS 生成随机字符串 随机颜色

    使用Math.random()生成随机数 0.7489584611780002数字的.toString(n) 将数字转换为 n 进制的字符串 n取值范围(0~36)"0.vbpjw8lipf ...

  6. Difference Between Accuracy and Precision

    What Is the Difference Between Accuracy and Precision? https://www.thoughtco.com/difference-between- ...

  7. 解决ImportError: No module named utils

    转载:https://blog.csdn.net/weixin_43979572/article/details/86159265 在Python中遇到了导包错误,其实包已经有了.原因是我再B文件的a ...

  8. 如何上传本地jar至远程仓库供其他项目使用

    我们首先需要创建自己内部nexus私服仓库.这里假设你已经做好了. 其次我们要明白nexus上如下几个component的用处. maven-central:maven中央库,默认从https://r ...

  9. java concurrent并发包使用

    package cn.com.zxf.atomic; import java.util.concurrent.atomic.AtomicInteger; public class AtomicExam ...

  10. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器解决方案之CDN内容分发网络

    背景分析 EasyDSS流媒体解决方案提供一站式的转码.点播.直播.录像.检索.时移回放服务,极大地简化了开发和集成的工作,并且EasyDSS支持多种特性,完全能够满足企业视频信息化建设方面的需求.其 ...