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 相关文章推荐
得到form下的所有的input的js代码
Nov 07 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
微信小程序实现写入读取缓存详解
Aug 30 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常用工具类大全附全部代码下载
2015/12/07 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
Django框架实现的分页demo示例
2019/05/25 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
C语言面试题
2013/05/19 面试题
毕业生自我鉴定
2013/12/04 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
详解如何使用Nginx解决跨域问题
2022/05/06 Servers