详解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 相关文章推荐
用json方式实现在 js 中建立一个map
May 02 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
Javascript的无new构建实例详解
May 15 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
解决$store.getters调用不执行的问题
Nov 08 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
php时间不正确的解决方法
2008/04/09 PHP
php cookis创建实现代码
2009/03/16 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php限制ip地址范围的方法
2015/03/31 PHP
PHP的全局错误处理详解
2016/04/25 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
JS跨域代码片段
2012/08/30 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
python实现多线程网页下载器
2018/04/15 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python实现扫雷游戏的示例
2020/10/20 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
EJB的角色和三个对象
2015/12/31 面试题
酒店员工职业生涯规划
2014/02/25 职场文书
《忆江南》教学反思
2014/04/07 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
色戒观后感
2015/06/12 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python
Python采集壁纸并实现炫轮播
2022/04/30 Python