Vue-CLI3.x 设置反向代理的方法
程序员文章站
2022-03-07 08:13:47
最近在项目中使用了vue cli 3.0版本,项目中需要设置反向代理解决跨域问题,下面记录一下设置过程。
如何安装vue-cli3呢?
首先,你要有一个nodejs...
最近在项目中使用了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官方文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。