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 相关文章推荐
JavaScript 高效运行代码分析
Mar 18 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 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
PHP n个不重复的随机数生成代码
2009/06/23 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JavaScript类的写法
2016/09/17 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python numpy 点数组去重的实例
2018/04/18 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
解析python实现Lasso回归
2019/09/11 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
HTML5中的新元素介绍
2008/10/17 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
怎样填写就业意向
2014/04/02 职场文书
师德师风自我评价范文
2014/09/11 职场文书
检讨书怎么写
2015/05/07 职场文书
运动会宣传语
2015/07/13 职场文书
企业安全生产检查制度
2015/08/06 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书