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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
安装vue-cli的简易过程
2018/05/22 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python输出指定月份日历的方法
2015/04/23 Python
python list转矩阵的实例讲解
2018/08/04 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
西班牙手机之家:Phone House
2018/10/18 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
怎么写好自荐信
2013/10/30 职场文书
愚人节活动策划方案
2014/03/11 职场文书
关于环保的建议书
2014/05/12 职场文书
敬老院标语
2014/06/27 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android