这篇文章将为大家详细讲解有关怎么在Vue-CLI3.x 中设置反向代理，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
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
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
关于怎么在Vue-CLI3.x 中设置反向代理就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
