vue axios本地代理接口地址

先找到配置文件的config.js里面的index.js修改proxyTable的值,修改为:

proxyTable: {

     '/Bapi': {

          target: 'http://40.00.100.100:3002',//设置你调用的接口域名和端口号 别忘了加http

          secure: false,

         changeOrigin: true,

           pathRewrite: {

            '^/Bapi': 'http://40.00.100.100:3002' // 这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可

          }

      }

    },

修改完index.js后再修改dev.env.js,修改为:

'use strict'

const merge = require('webpack-merge')

const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {

  BEST_URL:'"/Bapi"',

  NODE_ENV: '"development"'

})

修改完后我们再通过cnpm install --save axios安装插件,接着在src目录下创建server目录,在server目录下建server.js,在server.js里面:

import Axios from 'axios'

export default {

    get(urlStr,resObj) {

        var url = process.env.BEST_URL+urlStr;

        //var url =urlStr;

        return  Axios.get(url, {

                    params: resObj,

                })

    },

post(urlStr,resObj) {

       var url = process.env.BEST_URL+urlStr;

         //var url =urlStr;

        return  Axios.post(url, resObj)

    }

}

然后再mian.js引入:

import Axios from 'axios'

import http from '@/server/server.js'

Vue.prototype.$http=http

最后在各组件间获取数据:

this.$http.post('/xx/xx/xx', {

                          obj:obj(参数)

          }).then(data=> {

            }).catch(error=> {

             console.log(error);

    });

最终请求接口的地址会是:(你的本地ip地址加端口或localhost)/Bapi/xx/xx/xx

你可能感兴趣的:(vue axios本地代理接口地址)