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 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
Vue Element校验validate的实例
Sep 21 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实现登陆验证码(类似条行码状)
2006/10/09 PHP
967 个函式
2006/10/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python django 原生sql 获取数据的例子
2019/08/14 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
Python谱减法语音降噪实例
2019/12/18 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Django 再谈一谈json序列化
2020/03/16 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
德国拖鞋网站:German Slippers
2019/11/08 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
秋天的图画教学反思
2014/05/01 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis