简单记录一下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. XML-Signature 语法和签名

    一段  XML-signature  的 demo: <Signature xmlns="http://www.w3.org/2000/09/xmldsig#"> &l ...

  2. Linux的tmpfs和ramfs

    tmpfs tmpfs是一种虚拟内存文件系统, 它的存储空间在VM里面,现在大多数操作系统都采用了虚拟内存管理机制, VM(Virtual Memory) 是由Linux内核里面的VM子系统管理. V ...

  3. Android Studio运行Hello World程序

    老的神舟本本装上了深度LINUX了...应该是基于ubuntu的,安装软件用的apt-get而不是yum 想重装学下android原生开发,官网下载了android studio, 发现不用FQ也能下 ...

  4. bootstrap-select

    bootstrap-select 周下载量 63,214 是bootstrap中select库下载量最多的. https://www.npmjs.com/package/bootstrap-selec ...

  5. (转) 解决django项目部署到nginx+uwsgi服务器后 admin页面样式消失的问题

    原贴地址:https://blog.csdn.net/qq_42571805/article/details/80862455 摘要 uwsgi为主要服务器,nginx为反向代理服务器部署完成之后发现 ...

  6. Equinox开源项目CQRS架构分析

    CQRS架构下Equinox开源项目分析 一.DDD分层架构介绍 本篇分析CQRS架构下的Equinox开源项目.该项目在github上star占有2.4k.便决定分析Equinox项目来学习下CQR ...

  7. 一文看懂JS继承

    继承是OOP中大家最喜欢谈论的内容之一,一般来说,继承都两种方式:接口继承和实现继承而JavaScript中没有接口继承需要的方法,因此只能依靠实现继承.在讲继承的实现之前,我们首先来回顾一下什么是继 ...

  8. 在ensp上配置基于接口地址池的DHCP

    原理 实验模拟 实验拓扑 相关参数 开启dhcp服务 开启接口的dhcp服务功能,指定从接口地址池分配(接口1一样) 配置接口DHCP服务租期(租期默认是一天) 设置保留地址 设置dns 我们在pc1 ...

  9. How long does it take to make a context switch?

    FROM: http://blog.tsunanet.net/2010/11/how-long-does-it-take-to-make-context.html That's a interesti ...

  10. js中Function引用类型中一些常见且有用的方法和属性

    Function类型 函数由于是Function类型的一个实例,所以函数名就是一个指向函数对象的指针,不会与某个函数死死的连接在一起,这也导致了js中没有真正的重载,但好处是,函数对象可以作为另一个函 ...