vue3的proxy反向代理

首先使用vue cli快速创建一个vue3项目或者手动创建或者去各个开源网站下载vue3项目，vue3的项目目录结构较vue2简化了很多，

node_modules//这个项目的所有依赖包
public//公用的一些文件
src//vue2你熟悉的文件夹结构基本都在这里面
.gitignore//在这里书写git 忽略一些文件的规则
babel.config.js//将高版本js书写方式转译为向后兼容的js书写方式
package.json//使用了哪些依赖包，项目版本信息
package-lock.json//锁定的依赖包版本
readme.md//一般是关于这个项目的介绍以及如何使用等等
vue.config.js//对这个项目进行一些配置，比如热更新、设置端口号、反向代理关键配置就在这里

注意使用脚手架创建vue3的时候不会有vue.config.js这个文件，需要你自己手动创建且名字只能是这个，然后cmd项目输入npm i http-proxy-middleware --save或者cnpm也可以，最后这样配置vue.config.js

module.exports = {
…//这里是一些基本配置比如publicpath等等
devServer: {
open: true,
host: ‘0.0.0.0’,
port: 8080,
proxy: {
“/api/sx”: {
ws: false,
target: “url”, //你要代理的api
“pathRewrite”: {
“^/api/sx”: “” //api相当于一个别名
},
“changeOrigin”: true,
},
}
},
}

配置完成记得先重启项目

this.axios**//这里之所以可以this调用axios是因为项目安装了axios并在vue的原型上添加了axios(vue.prototype.axios=import的axios)**

​ .get("/api/sx", { params: param })//这里的请求接口就相当于是你在proxy里的target里写的url了
​ .then((res) => {
​ console.log(res.data);
​ })
​ .catch((err) => {
​ console.log(err);
​ });
欢迎各位大佬斧正