vue配置api代理详解与使用方法

创建的vue框架中，在自动生成的config目录下dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {NODE_ENV: '"development"',BASE_URL:'"/api"' //这里是自己修改的
})

config目录下index.js(只放关键代码)

  dev: {env:require('./dev.env'),//开发环境下// PathsassetsSubDirectory: 'static', //除index.html之外的静态资源要存放的路径assetsPublicPath: '/',//打包后，index.html里面引用资源的相对地址proxyTable: {//在api方式中，这里的对象名和dev.env.js的BASE_URL的值一样，可将BASE_URL的值替换'/api':{//在代理方式中，设置访问前缀为api，如果不管用，改成'/api/*'target:'http://11.0.34.122:5000',//本地测试changeOrigin:true,//在vue-cli3下默认为true,是否跨域请求//secure:true,//如果开头是https,打开这一条pathRewrite:{//配置跨域请求 ，如果后台的接口前缀不是api,则重写前缀名，比如'^/api':'/save',则配出来的接口是http://127.0.0.1:8080/save/login//   //'^api':'/api' 这种接口配出来是 http://127.0.0.1:8080/api/login（举例）'^/api':'' //则接口配出来是 http://127.0.0.1:8080/login（举例）// }}},...

在src下新建文件夹api——>新建index.js

import axios from 'axios'
const api = axios.create({baseURL:process.env.BASE_URL,timeout:2000000//请求超时
})
// 基础信息接口
export function getDefaultMess(dev){ return api({url:'/basicInfo/BasicInfoGET',method:'get',params:{dev}})
}

组件调用接口，在vue文件中引用

import {getDefaultMess} from '../api/index'
export default {data(){return {a:'',b:''}},mounted:{this.loadPageMess()}, //初始化加载信息methods:{loadPageMess(){let _this = thisgetDefaultMess('A区信息').then(res => {_this.a = res.data.a //举例，具体赋值看后台数据放在那里_this.b = res.data.b})}}
}

注意：
1、千万不要在config下dev.env.js和prod.env.js里写注释，会报错
2、给后台发送数据，方法为get时用params，例如params:{dev}，传给后台的就是{dev:xxx}，方法为post时用params或data都可以（附：data就是直接传数据，一般是json格式，如"{“a”:123,“b”:“hello”}"）
3、引入api接口函数，调用时不需要加前缀.this，但在接口内会改变this指向，操作本组件data(){return}中的变量或方法时，需要通过et _this =this，然后_this.组件的变量或方法

vue配置api代理详解与使用方法相关推荐

vue-cli脚手架配置基础文件详解/新手入门必看
vue-cli 脚手架中webpack 配置基础文件详解需要Word版本的小伙伴可以发我邮件2445478193@qq.com 一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的 ...
大型企业网络配置系列课程详解（四） --HSRP和VRRP配置与相关概念的理解（一）...
大型企业网络配置系列课程详解(四)<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office&qu ...
react和vue配置本地代理
React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...
最全的jquery datatables api 使用详解
https://www.cnblogs.com/amoniyibeizi/p/4548111.html 最全的jquery datatables api 使用详解学习可参考:http://www.g ...
ETCD v3 restful api 使用详解
ETCD v3 restful api 使用详解网上已经有很多关于v2接口的使用了,类型下面的请求方式,本文就主要讲解v3版本的restful api的使用方式. //V2版本curl http:/ ...
android Camera2 API使用详解
原文:android Camera2 API使用详解由于最近需要使用相机拍照等功能,鉴于老旧的相机API问题多多,而且新的设备都是基于安卓5.0以上的,于是本人决定研究一下安卓5.0新引入的Came ...
实例化vue发生了什么?(详解vue生命周期)
实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些 ...
微服务分布式配置中心Apollo详解
微服务分布式配置中心Apollo详解 1. 配置中心概述 1.1 配置中心简介 1.2 配置中心特点 1.3 配置中心对比 2. Apollo概述 2.1 Apollo简介 2.2 Apollo特点 ...
交换机ARP代理详解
交换机ARP代理详解图表 The Host A (172.16.10.100) on Subnet A needs to send packets to Host D (172.16.20.200) ...

vue配置api代理详解与使用方法

vue配置api代理详解与使用方法相关推荐

最新文章

热门文章