Vue-CLI3.x 设置反向代理的方法

最近在项目中使用了Vue CLI 3.0版本，项目中需要设置反向代理解决跨域问题，下面记录一下设置过程。

如何安装vue-cli3呢？

首先，你要有一个nodejs环境

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

其次，如果你之前安装了vue-cli的旧版本，那么你要做如下操作

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

假设你已有了nodejs环境，你可以通过下面指令安装vue-cli3的包

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。（例如 vue --version）

新建配置文件

在项目的根目录下新建 vue.config.js 文件，自Vue CLI 3开始，项目中所有的配置信息都写在这个文件中（2在config目录中配置）。

配置反向代理

设置代理

module.exports = {
 devServer: {
  // 设置代理
  proxy: {
   "/v1": {
    target: "http://127.0.0.1:8081/", // 域名
    ws: true, // 是否启用websockets
    changOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
    pathRequiresRewrite: {
     "^/v1": "/"
    }
   }
  }
 }
};

在请求中使用

// '/v1'等于'http://127.0.0.1:8081/v1'
// 此时请求地址为'http://127.0.0.1:8081/v1/picture?method=upload'
get('/v1/picture?method=upload')

更多

更多内容请参考Vue CLI官方文档https://cli.vuejs.org/zh/config/#devserver-proxy

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

  • 详解vue-cli 接口代理配置

    本文介绍了vue-cli 接口代理配置,分享给大家,具体如下: 一些同学在配置接口代理时,会有疑问 我配置成功了为什么接口还是不通 ,其实代理已经成功 只是 接口访问地址规则没搞清楚 下面以本地测试为栗子 向大家介绍 一些基本操作这里就不介绍了 找到vue-cli config 文件夹下的 index.js  这是是配置接口规则的文件 同目录下建立 proxyConfig.js  一些同学习惯直接在原文件修改 ,也是可以但推荐使用新建文件的方式: module.exports = { proxy

  • 解决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 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-cli3全面配置详解

    本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目录中新建.env, .env.production, .env.analyz等文件 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO

  • Vue-CLI3.x 设置反向代理的方法

    最近在项目中使用了Vue CLI 3.0版本,项目中需要设置反向代理解决跨域问题,下面记录一下设置过程. 如何安装vue-cli3呢? 首先,你要有一个nodejs环境 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. 其次,如果你之前安装了vue-cli的旧版本,那么你要做如下操作 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue

  • 使用nginx同域名下部署多个vue项目并使用反向代理的方法

    效果 目前有 2 个项目(project1, project2),还有一个 nginx 自带的 index.html,我添加了对应的链接代码(稍后粘贴出来),为了统一管理子项目的路由. 我期望实现下面的效果(假设 ip: localhost,port: 8080): http://localhost:8080/ 进入最外层的 index.html http://localhost:8080/project1 进入项目一 http://localhost:8080/project2 进入项目二 废

  • Apache设置反向代理的方法

    反向代理有很多实现方式,本文主要讲述Apache的反向代理. 1.简述 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器. 下图就是一个简单的反向代理过程 2.配置 1).首先确保Apache有这些模块,在Apache根目录下确认有这些模块,主要包含以下模块: mod_proxy.so mod_proxy_

  • 在Nginx服务器中配置mod_proxy反向代理的方法

    反向代理做法可以为网站安全做更高一步,像一些银行肯定是使用了反代理就是你进入代理服务器也得不到任何数据,下面我来介绍nginx用mod_proxy实现反向代理配置方法. 由于项目需要实现一个域名代理的功能 比如: 复制代码 代码如下: a.com/a.html=>b.com/b.html 也就是用a.com代理了所用b.com网站的请求,经过朋友介绍用apache的反向代理可以实现其目的,哥们试了一下,果然很爽.配置起来也超级的方便. (注意下面只介绍反向代理,正向代理等我用到了再介绍嘿嘿) 1

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

  • Python中使用socks5设置全局代理的方法示例

    0x01介绍 PySocks使您可以通过SOCKS和HTTP代理服务器发送流量.它是SocksiPy的现代分支,具有错误修复和其他功能. 0x02 安装 λ pip3 install Pysocks 0x03 测试 正常请求,httperror无法获得 加入socks5代理后,可以获得当前程序的全局代理可以 正常访问 import socket import socks socks.set_default_proxy(socks.SOCKS5, "127.0.0.1", 10808)

  • Vue项目如何设置反向代理和cookie设置问题

    目录 Vue设置反向代理和cookie设置 项目场景 问题描述 原因分析 解决方案 Vue项目使用js-cookie细则 什么是js-cookie 在项目中进行安装 在项目中的入口文件(main.js)全局引入 在项目中使用 Vue设置反向代理和cookie设置 项目场景 最近使用Vue开发一个新的项目,因为服务器还没到,调取后端本地接口,因为请求接口的时候没有跨域,就没开反向代理.后面就被一个很基础的东西踩了坑,就是 cookie的一些知识,记录一下,加深一下印象. 问题描述 联调过程中,发现

  • vue中的proxyTable反向代理(亲测有用)

    vue中的proxyTable反向代理(亲测有用)

    目录 proxyTable反向代理 1.打开vue项目->config->index.js 2.打开一个vue页面 3.npm run dev 反向代理的实现原理 实现原理 程序运行过程 proxyTable反向代理 proxyTable的设置网上有的是,以前也没管过,但新公司的项目需要用到,所以就彻底研究一下,结果绕了好大的弯子! 注:每次设置完proxyTable,请一定要重启,刷新不好使   npm run dev! 开始前,请劳记上面操作,我就在这绕了很大的弯,一直以为页面刷新就行了,

  • springboot整合Nginx实现负载均衡反向代理的方法详解

    springboot整合Nginx实现负载均衡反向代理的方法详解

    目录 一.百度百科 二.Nginx作为web服务器 三.Nginx处理请求逻辑图 四.Nginx的优点 五.Nginx应用场景 1.反向代理 2.负载均衡 3.动静分离 六.Nginx的常用命令 1.启动 2.从容停止 3.快速停止 4.强制停止 5.重启 6.重启Nginx服务 七.Nginx配置文件 八.Nginx 配置实例-反向代理实例 1.实现效果 2.准备工作 3.访问过程的分析 4.具体配置 5.最终测试 九.Nginx 的原理 1.mater 和 worker 2.worker 如

  • 为python设置socket代理的方法

    首先,你得下载SocksiPy这个.解压出来之后里面会有一个socks.py文件.然后你可以把这个文件复制到python安装目录里面的Lib\site-packages中.或者把这个文件复制到程序所在的目录中. 然后就可以再程序中使用socket代理来编写程序了. 下面是示例代码 import socks import socket socks.setdefaultproxy(socks.PROXY_TYPE_SOCKS5,"127.0.0.1",8088) socket.socket

随机推荐