Vue-CLI3.x 设置反向代理的方法

最近在项目中使用了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