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

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

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

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

  dev: {
    
    
    env:require('./dev.env'),//开发环境下
    // Paths
    assetsSubDirectory: '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 = this
			getDefaultMess().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.组件的变量或方法