详解vue-cli 接口代理配置


Posted in Javascript onDecember 13, 2017

本文介绍了vue-cli 接口代理配置,分享给大家,具体如下:

一些同学在配置接口代理时,会有疑问 我配置成功了为什么接口还是不通 ,其实代理已经成功 只是 接口访问地址规则没搞清楚

下面以本地测试为栗子 向大家介绍

一些基本操作这里就不介绍了

找到vue-cli config 文件夹下的 index.js  这是是配置接口规则的文件 同目录下建立 proxyConfig.js  一些同学习惯直接在原文件修改 ,也是可以但推荐使用新建文件的方式:

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  (这里是代理接口的位置)
      changeOrigin: true,(允许跨域,如果这不写,调用接口接口时会有跨域错误说缺少请求头)
      pathRewrite: {'^/api': '' } (路由规则下面详细介绍)
    }
  }
}

******路由规则*******

上述代码执行之后,意思就是 只要在接口中看到‘/api‘ 会自动变成我们设置的地址,那么我们在设置的时候可以规范接口书写标准 就用到了这个属性 pathRewrite 路径重写{'^/api': '' } 是指你想让路由变成什么样子 ,如果是空 那么在解析时 如果我们的接口写的是 $http.get('/api/good') 那么在服务端我们将会看到 /good的访问,如果此时在服务端并没有相应的路由匹配,客服端就会显示报错,端口号还是客户端的端口号,所以很多同学就错觉没有起作用 ,同理如果我们设置{'^/api': '/api' } 那么在服务端将会看到/api/goods 的接口访问,意思就是不仅将/api自动解析成代理地址,还会作为服务端的路由展示。

另外在设置路由规则注意分隔符/  有些同学喜欢这样写 target: 'http://localhost:3000/', 自己写端口后面加上一个分隔符,会发现路由对不上,这时你需要在命名的时候也要加上‘/' 路由规则也要加上‘/' 接口才能对,不然 会发现请求接口的时候多了一个分隔符 如:'/api//goods'。

设置完之后,在index.js 里面 引入 proxyConfig.js,设置 proxyTable 完成设置

const proxyConfig = require('./proxyConfig')
module.exports = {
  dev: {
    env: require('./dev.env'),
    host: 'localhost',
    port: 8188,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxyList,
    cssSourceMap: false,
  }
 }

请求时 这样写

axios.get('/api/goods').then((res)=>{console.log(res.data);}}).catch((err)=>{console.log(err);}})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
了解jQuery技巧来提高你的代码
Jan 08 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
Node.js安装配置图文教程
May 10 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 #Javascript
vue.js简单配置axios的方法详解
Dec 13 #Javascript
关于Vue单页面骨架屏实践记录
Dec 13 #Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 #Javascript
node vue项目开发之前后端分离实战记录
Dec 13 #Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 #Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 #Javascript
You might like
mayfish 数据入库验证代码
2010/04/30 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
学习ExtJS table布局
2009/10/08 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python中range()与xrange()用法分析
2016/09/21 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
python与C互相调用的方法详解
2017/07/14 Python
Python线程同步的实现代码
2018/10/03 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
经济信息系毕业生自荐信
2014/06/02 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
北京导游词
2015/02/12 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
小学教师教学随笔
2015/08/14 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
python获取对象信息的实例详解
2021/07/07 Python