在dev环境下面:

proxyTable: {
'/api': {
target: 'http://api.douban.com/v2', //主域名,以前我都写192.168.2.57:80,这里跨域了
changeOrigin: true, //允许跨域
pathRewrite: {
'^/api': ''
}
//重写路径,其实这里就是和上面的target拼接起来
}
}

以前的老项目里是写成这样的:

proxyTable: {
"/middleware": {
target: "http://192.168.2.57:80",
pathRewrite: {
'^/middleware': '/patient/1116/guangji/middleware' //上下拼接,组成完整的请求路径
},
changeOrigin: true,
}
}

配合axios使用:

//在main.js中:  

Vue.prototype.HOST = '/api'     

//将api设置成全局属性,然后再给每个请求地址引用一下。
//这里必须这样写,我试了一下如果不在全局注册api的话,它还是会去请求192.168.2.57:8888下面的地址 //在代码里: this.axios.get(this.HOST + '/movie/in_theaters').then((response) => {
console.log(response);
})
//请求的接口是:http://api.douban.com/v2/movie/in_theaters 拼接起来的

注意:

1.这个方法只是讲了proxyTable应该怎样配置。

2.只能用在开发环境中,生产环境怎么用我还要再研究一下。

3.千万别忘了在main.js中引入api作为全局变量。

proxyTable的配置的更多相关文章

  1. webpack的proxytable的配置

    这个一定不能忘记了/rest/后面的/,否则就是404找不到接口 这样的实现效果是 this.axios.post('/api/delShare', qs.stringify({'Id':Number ...

  2. vue-cli#2.0 webpack 配置分析

    目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...

  3. 构建:vue项目配置后端接口服务信息

    背景 vue-cli脚手架生成的webpack标准模板项目 HTTP库使用axios 一.开发环境跨域与API接口服务通信 整体思路: 开发环境API接口请求baseURL为本地http://loca ...

  4. 前端如何使用proxyTable和nginx解决跨域问题

    最近经常遇到跨域的问题,有时候问题虽然解决了,但是还是会有些模棱两可概念不清,于是在网上看了一些教程结合实际使用,做个笔记. 1.跨域原因 浏览器的限制 跨域(协议/域名/端口的不同) XMLHttp ...

  5. vue 一些webpack的配置详解

    最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基 ...

  6. vue proxyTable代理 解决开发环境的跨域问题

    如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 可以设置代理为: dev:{ assetsSubDirectory: 'static',// 静态资源文件夹 assetsPub ...

  7. Vue 项目代理设置的优化

    Vue 项目代理设置的优化 Vue 类的项目开发中项目结构基本都是类似于 Vue-cli 生成的方式, 这种方式开发中,最常用到的模式是开启代理进行 mock 调试或远程调试, 也就是使用了 Vue- ...

  8. Vue全家桶(Vue-cli、Vue-route、vuex)

    摘要 学习本篇之前要具备一定的vue基础知识,可以先看一下Vue基础(环境配置.内部指令.全局API.选项.内置组件) 1.Vue-cli Vue-cli是vue官方出品的快速构建单页应用的脚手架,这 ...

  9. 详解 vue-cli 的打包配置文件代码(给大家写写注释)

    一.前言 对于webpack基础不好,node指令不通的童鞋.估计对自己搭建Vue.react脚手架是相当头疼的,有种无从下手的感觉.然而,从头看这2块,耗时太长,而且说实话得练才行,不练练手看不明白 ...

随机推荐

  1. RAM-Based Shift Register (ALTSHIFT_TAPS) IP Core-实现3X3像素阵列存储

    最近想要实现CNN的FPGA加速处理,首先明确在CNN计算的过程中,因为卷积运算是最耗时间的,因此只要将卷积运算在FPGA上并行实现,即可完成部分运算的加速 那么对于卷积的FPGA实现首先要考虑的是卷 ...

  2. GSON转换成Long型变为科学计数法及时间格式转换异常的解决方案

    直接上工具类了,简单实用 public class GsonUtils { private static Gson gson = null; static { if (gson == null) { ...

  3. jquery JavaScript如何监听button事件

    下面的html页面中有两个按钮 <div class="layui-tab-item layui-show"> <form class="layui-f ...

  4. vue2.0学习之基础内容

    import BScroll from 'better-scroll'; import star from '../star/star.vue'; import split from '../spli ...

  5. 调参、最优化、ml算法(未完成)

    最优化方法 调参方法 ml算法 梯度下降gd grid search lr 梯度上升 随机梯度下降 pca 随机梯度下降sgd  贝叶斯调参 lda 牛顿算法   knn 拟牛顿算法   kmeans ...

  6. 对“深入理解 Java 内存模型(六)——final”的学习

    转载自https://www.infoq.cn/article/java-memory-model-6/ 与前面介绍的锁和 volatile 相比较,对 final 域的读和写更像是普通的变量访问.对 ...

  7. Contig|scaffold|N50|L50|NG50|贪心算法|de bruiji graph|

    生物信息学 Contig是reads拼成的连续的DNA片段,连续表达一个gene.通过双端测序的contig可确定contig之间的关系得到scaffold,Scaffold是reads拼成的有gap ...

  8. 网络TCP/IP分层、子网掩码等基本概念

    一.TCP/IP分层: OSI七层网络模型 TCP/IP四层概念模型 对应网络协议 应用层(Application) 应用层 HTTP.TFTP, FTP, NFS, WAIS.SMTP 表示层(Pr ...

  9. OpenCV 图像平滑处理

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" us ...

  10. IOC初始化销毁的2种实现方式

    IOC初始化销毁的2种实现方式 1.bean内调用init-method 和destroy-method 2.通过注解实现@PostConstruct 和@PreDestroy ----------- ...