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


Posted in Javascript onDecember 06, 2018

最近在项目中使用了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

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

Javascript 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
jQuery手风琴的简单制作
May 12 jQuery
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
JavaScript中引用vs复制示例详析
Dec 06 #Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 #jQuery
express+vue+mongodb+session 实现注册登录功能
Dec 06 #Javascript
如何使用puppet替换文件中的string
Dec 06 #Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 #Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 #Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
微信小程序日历效果
2018/12/29 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
2014年学习部工作总结
2014/11/12 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
mysql全面解析json/数组
2022/07/07 MySQL