创建的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'),//开发环境下
    // 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('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.组件的变量或方法

Logo

前往低代码交流专区

更多推荐