简单记录一下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. NLP基本模型

    textcnn: 加载预训练词典:https://blog.csdn.net/nlpuser/article/details/83627709 构建textcnn网络:https://blog.csd ...

  2. Linux下安装.NET Core

    环境 { "操作系统":"CentOS 7.5 64位", "CPU":"1核", "内存":&qu ...

  3. 分布式ID生成总结

    1.数据库自增id 新建一个公共库,库里面新建一个序列表,主键id自增,每次请求增加数据都往这个表中插入数据,然后获取到id,然后使用即可. 优点:方便简单 缺点:单库生成自增id,高并发下,会有瓶颈 ...

  4. linux 常用软件安装

    pip3 yum install python36 python36-setuptools -y easy_install-3.6 pip

  5. React 简介

  6. 领域模型/DDD领域驱动设计

    http://www.fanyilun.me/2018/04/08/%E8%B0%88%E8%B0%88%E9%A2%86%E5%9F%9F%E5%BB%BA%E6%A8%A1/ http://www ...

  7. 【ARM-Linux开发】OpenACC并行编程实战笔记

    今年运气比较好,学了cuda之后,了解到了gpu的另两种使用语言opencl和openacc,  opencl(Open Computing Language ,开放计算语言)是面向异构系统的并行编程 ...

  8. electron实现MessageBox

    1.在渲染进程引用主进程模块 var remote = require('electron').remote; var dialog = remote.dialog; 2.实现一点简单的确定取消操作 ...

  9. 【springcloud】【idea】启动服务报错Command line is too long. Shorten command line for XXXApplication or also for Spring Boot default configuration.

    在workspace.xml 在标签<component name="PropertiesComponent">里 添加<property name=" ...

  10. 处理登录时,AJAX的状态码无权限情况

    $.ajaxSetup({ complete: function(XMLHttpRequest, textStatus) { }, error:function(jqXHR,textStatus,er ...