网站空间登陆,网站在互联网营销中的作用,建筑网库,wordpress随机图片文章目录 场景解决方案思路实现步骤创建项目目标前端配置安装cross-env配置vue.config.js配置package.json 测试 场景 一个前端#xff0c;需要同时和N个后端联调 一个需求里有若干个模块#xff0c;分别给不同的后端开发#xff0c;前端需要和N个后端联调 本地开启一个端… 文章目录 场景解决方案思路实现步骤创建项目目标前端配置安装cross-env配置vue.config.js配置package.json 测试 场景 一个前端需要同时和N个后端联调 一个需求里有若干个模块分别给不同的后端开发前端需要和N个后端联调 本地开启一个端口给测试然后你需要去做其他的需求但是其他的需求需要连接另一个后端接口 其他情况总之1个前端 VS N个后端
上述场景都是一个前端联调N个后端的场景你可能没遇到过但是确实存在上述的场景。尤其是第三种最为常见你会一直等测试完了、再去换一个后端代理地址接着开发吗当然不能这样做很浪费时间说明你不是一个合格的牛马牛马的觉悟不够牛马是不会让自己闲着的。
那么怎么办呢和A联调时proxy指向url-A和B联调时proxy指向url-B……换其他人联调时你是把本地项目关掉然后换个proxy代理、再重启一下吗
当然可以如果你不嫌麻烦的话那么有没有好办法呢
这个问题问得好当然有了
解决方案 本例以vue2的vue-cli方式【webpack】为例 思路
既然vue.config.js能代理一个proxy那么能不能代理多个proxy呢当然能 本文先讲解传统模式的代理以后写一个函数式代理 vite有更好的代理方式暂且不表 实现步骤
创建项目
创建一个空的vue2项目
vue create project-name默认情况下npm run serve会启动8080端口
目标
我希望不同的端口指向不同的后端代理proxy地址如
8100端口代理后端7001端口8105端口代理后端7002端口
没毛病吧本文以代理2个后端为例其余的大家自行补充
前端配置
安装cross-env
yarn add cross-envcross-env是nodejs设置环境变量的工具它解决了不同操作系统之间环境变量设置语法不一致的问题具体可自行搜索
配置vue.config.js
const { defineConfig } require(vue/cli-service)module.exports defineConfig({transpileDependencies: true,// webpack-dev-server 相关配置devServer: {host: 0.0.0.0,port: process.env.PORT || 8100,open: false,proxy: {/api: {target: getProxyTarget(process.env.PORT),changeOrigin: true,pathRewrite: { ^/api: }}},},
})function getProxyTarget(port) {switch (port) {case 8100:return http://127.0.0.1:7001case 8105:return http://127.0.0.1:7002default:return http://127.0.0.1:7001 // 默认代理地址}
}上述代码默认设置启动端口为8100并且getProxyTarget函数可以根据不同的端口指向不同的代理地址。
配置package.json
{name: more-proxy,version: 0.1.0,private: true,scripts: {serve: vue-cli-service serve,serve:8005: cross-env PORT8105 vue-cli-service serve,build: vue-cli-service build},dependencies: {cross-env: ^7.0.3,vue: ^2.6.14},devDependencies: {vue/cli-service: ~5.0.0,vue-template-compiler: ^2.6.14},browserslist: [ 1%,last 2 versions,not dead]
}上述代码重点是serve:8005这行就是你要代理哪个端口这里需要你在vue.config.js写对应的映照proxy
测试
上述配置已经实现了我们的需求那么具体测试一下吧。
本地启动两个nodejs服务分别为7001和7002端口内容如下
/// 7001端口
const http require(http);const hostname 127.0.0.1;
const port 7001;const server http.createServer((req, res) {res.statusCode 200;res.setHeader(Content-Type, text/plain);res.end(my port is 7001!);
});server.listen(port, hostname, () {console.log(Server running at http://${hostname}:${port}/);
});/// 7002端口
const http require(http);const hostname 127.0.0.1;
const port 7002;const server http.createServer((req, res) {res.statusCode 200;res.setHeader(Content-Type, text/plain);res.end(my port is 7002!);
});server.listen(port, hostname, () {console.log(Server running at http://${hostname}:${port}/);
});然后前端把上面的2个端口启动写一个测试函数
mounted() {fetch(/api).then(() {})
}效果如下 8100已经成功代理7001了 同样的8105也代理了7002 其余的vue3react也可以用类似的思路 如果感兴趣可以点一下关注后续会出函数式1前端 VS N后端更加优雅
如果有其他更好的方案可以评论留言。
