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