webpack+vue-cil 中proxyTable配置接口地址代理操作

在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可:

dev: {

 // 静态资源文件夹
 assetsSubDirectory: 'static',

 // 发布路径
 assetsPublicPath: '/',

 // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
 // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
 // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
 proxyTable: {
  '/api': {
  target: 'http://xxxxxx.com', // 接口的域名
  // secure: false, // 如果是https接口,需要配置这个参数
  changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
  pathRewrite: {
   '^/api': ''
  }
  }
 },
 // 本地访问 http://localhost:8080
 host: 'localhost', // can be overwritten by process.env.HOST

接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api, 因此接口地址需要写成这样的即可生效 /api/save/index。

注意: '/api' 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。

补充知识:webpack -- 关于proxyTable的配置在开发环境和生产环境中的原理解析

前言

首先,proxyTable是我们在本地开发环境中调试接口用的,目的是为了解决本地跨域的问题,因为本地地址为localhost:xxxx/xxx

在线上的生产环境是没用的!!!

假设我们用的是vue-cli命令行工具生成的webpack项目模板,我们很容易能在config文件夹下面找到index.js文件。

本地如何配置

假设我要请求的地址为

'http://xxx.com/scada/json/aa.tpl'

我们在index.js文件中找到如下代码:我推荐了一种写法,后面我会说为什么

那么我请求的那段代码就是这样的

axios.get('/scada/json/aa.tpl').then((res) => {
 //........
})

稍微解释一下其中的原理:当发请求的时候,proxy就会起作用,他会在接口'/scada'前面加上 ‘http://xxx.com:123',成为 ‘http://xxx.com:123/scada/json/aa.tpl' 由于我们配置中的 pathRewrite字段需要将 '/scada'写为 ‘/scada',所以请求接口还是 ‘http://xxx.com:123/scada/json/aa.tpl'

继续向下看,干货还在后面

假设几种其它的写法

假设一

如果proxyTable配置是这样的

proxyTable: {
 '/scada': {
 target: 'http://xxx.com:123',
 changeOrigin: true,
 pathRewrite: {
  '^/scada': '/'
 }
 }

那么我们的请求代码必须写成这样

axios.get('/scada/scada/json/aa.tpl').then((res) => {
 //........
 //是不是有点难受
})

假设二

如果proxyTable配置是这样的,也就是重新起个名字

proxyTable: {
 '/api': {
 target: 'http://xxx.com:123',
 changeOrigin: true,
 pathRewrite: {
  '^/api': '/'
 }
 }

那么我们的请求代码必须写成这样

axios.get('/api/scada/json/aa.tpl').then((res) => {
 //........
 //这种写法还能接受,但是有个致命的缺点
})

再向下看,看看我推荐的写法的真真优势

打包上线的问题

这里只说代码上线之后和接口在同源情况下,如果不同源则存在跨域,这里先不考虑这种情况

假如我们把打包后的代码也部署到了 'http://xxx.com:123'上

上线后的代码为生产环境,没有了proxy

那么他是怎么解析请求的呢?比如下面这个请求

axios.get('/scada/json/aa.tpl').then((res) => { //........

})

由于 '/'表示的是根目录的意思,所以会解析为hostname + port + 请求的地址,即为 ‘http://xxx.com:123/scada/json/aa.tpl' ,没有一点问题,接口肯定能请求到

那么如果按照上面我说的假设一或者假设二的写法呢?

是不是会解析为 ‘http://xxx.com:123/scada/scada/json/aa.tpl' 和 ‘http://xxx.com:123/api/scada/scada/json/aa.tpl'

所以,假设一和假设二需要在打包之前修改请求地址才能打包,增加了许多不必要的麻烦

以上这篇webpack+vue-cil 中proxyTable配置接口地址代理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2020-07-17

vue-cli的webpack模板项目配置文件分析

由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会"太折腾". 一.文件结构 本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-ser

详解vue-cli 2.0配置文件(小结)

上次给大家分享的是用vue-cli快速搭建vue项目,虽然很省时间和精力,但想要真正搞明白,我们还需要对其原理一探究竟. 大家拿到一个项目,要快速上手,正确的思路是这样的: 首先,如果在项目有readme.md的情况下,大家要先读readme,项目的一些基本介绍,包括项目信息.运行的脚本.采用何种框架,以及项目维护者等信息通常都会有.一般在git上维护的项目都会有readme.md,不熟悉markdown语法的同学可以先了解下markdown入门. 第二步,要看package.json.现代的前

vue-cli3中vue.config.js配置教程详解

前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

vue cli3 配置proxy代理无效的解决

vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

vue element-ui 绑定@keyup事件无效的解决方法

解决办法: <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解

在vue中使用console.log无效的解决

webpack开发环境下,在vue中使用console.log无效,一直以为webpack出了问题. 使用window.console.log()就能够顺利在浏览器控制台输出了. 以及 在axios请求的回调中依旧无法输出使用window.console.log()/console.log(),先留坑吧. 补充知识:vue中 :style 与 :class 三元运算符使用 style三元表达式 <p :style="{'color': (checkIndex3==m.txt ? '#3d8

Vue proxyTable配置多个接口地址,解决跨域的问题

最开始的时候,因为请求后台出现跨域问题. 查找资料配置proxyTable,解决跨域问题.如下图所示: axios请求页面: this.$axios.post('/api/weblogin/login',data).then(res=>{ console.log(res) }) 后面遇到需要连接不同的接口域名,我在proxyTable里增加了一个apiGas.axios请求存在获取得到api但是不能获取apiGas(提示请求资源不存在). proxyTable: { '/api': { targ

详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计

执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值,比如: page1.f151b4d3.js 那如果不要 hash 呢,你只需要配置 vue.config.js 文件中的 filenameHashing 官方文档也提到了因为 html 也是我们通过插件生成的,静态资源直接就 inject 进去的,所以,当 html 不是自动生成或者其他情况时候,就不能加 hash 了,可以配置 false. filenameHashing: false 我们看看

详解Vue CLI3配置解析之css.extract

大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ExtractTextPlugin = require('extract-text-webpack-plugin') 这个插件的描述如下: Extract text from a bundle, or bundles, into a separate file. 然后配置如下:(省去了 rules

解决vue中使用proxy配置不同端口和ip接口问题

问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081  或者 http://192.168.10.30:9999等 解决问题: 在vue.config.js中配置不同的端口号 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devSe

Vue项目配置跨域访问和代理proxy设置方式

在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

vue cli3.0打包上线静态资源找不到路径的解决操作

项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

vue打包使用Nginx代理解决跨域问题

vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了. 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 使用nginx配置反向代理,这样就可以在前端彻底解决跨域问题. vue index.js文件源码 'use strict' // Template version: 1.2.7 // see http://vuejs-templates.github.io/webpack for