vue3proxy反向代理

·  阅读 160

首先使用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); ​ });

分类:
前端
标签: