在vue中同时跑两个服务配置和跨域问题的配置

最新推荐文章于 2024-06-10 21:19:46 发布
最新推荐文章于 2024-06-10 21:19:46 发布
阅读量2.1k 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45178761/article/details/103934526
版权
本文介绍了在Vue项目中如何配置同时运行两个服务，并解决跨域问题。通过使用concurrently安装依赖，可以在package.json中管理多个服务。对于axios的跨域问题，可以在vue.config.js中进行相应设置。
摘要由CSDN通过智能技术生成

1:同时跑两个服务配置： 1：cnpm i concurrently -D 2:在package.json中。

"scripts": {
   
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "server": "nodemon server.js",
     "dev":
最低0.47元/天 解锁文章
奘倥城
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
配置vue前端服务器及express服务器端的服务器同时运行——concurrently
angrynouse的博客
08-02 875
因为运行时，前后端都要以服务器方式打开，所以要在后端代码文件夹根目录终端执行一个。：可以通过concurrently设置，使用一行命令，让前后端服务器同时运行。说明：后端服务器用的node的express框架模拟的。命令，还要在前端项目根目录终端执行一个。命令，操作比较麻烦。...
Visual Studio Code vue 同时启动两个项目
狼魂之力
10-13 1146
xxxx
vue解决跨域问题
最新发布
weixin_52350720的博客
06-10 449
6.10打卡
在 vue cli3 的项目中配置双服务，模拟 ajax 分页请求
weixin_34234823的博客
11-21 107
最近安装了下vue cli3版本，与 cli 2 相比，文件少了，以前配置方法也不管用了。demo 中的大量的数据，需要做成 ajax 请求的方式来展示数据，因此，需要启动两个服务，一个用作前端请求，一个用作后端发送。 双服务的配置方法在 build / webpack.dev.conf.js 中写入。 在安装成功 vue 后，是仅有一个 端口为 8080 的服务，默认的服务名称为：devServ...
前端vue项目设置代理服务器解决跨域和利用Mock.js模拟接口
weixin_44679078的博客
11-15 3081
前端开发环境中暂时自我解决跨域问题 方案1：要求后端在测试服务器环境开启允许跨域 方案2：不需要后端处理，前端在开发者模式下，用代理解决跨域 （一般正式部署上线都是由后端进行跨域的响应头的端对端的允许，不会在前端增加一层代理） 例子：利用vue脚手架服务器进行代理访问 /api 的请求 步骤： 1.创建vue.config.js文件 2.文件内容如下 module.exports = { devServer: { proxy: { // 要进行代理的请求
一套VUE代码部署到两个不同域名的服务器
weixin_43586779的博客
12-11 1767
应用场景 一：一套代码对接两个部门（部署到两个不同域名的服务器），输入不同的命令行打包即可部署到不同服务器 二：(或者)一套代码分别部署到生产环境和测试环境即可使用（本次需求时应用场景一） .env npm run serve/build(读取该文件) VUE_APP_ROOT=/beta/vr/ VUE_APP_API=/beta/ VUE_APP_BASE_URL="https://abcdefg.com/beta/" .env.WJBuild NODE_ENV='production' VUE_AP
一个vue项目中访问两个服务器地址出现跨域问题，axios直接使用，跨域问题解决后还报404解决
qq_39536826的博客
09-02 3305
项目情况：一个vue项目需要的数据在两台服务器上，前端访问就出现了两次跨域问题 一、解决跨域问题 在webpack.config.js或者vue.config.js中找到devServer 并在下面用代理： target就是服务器地址 proxy内的代码如下： //proxy内的代码 proxy: { // 第一台服务器配置 '/gosd': { target: process.env.SUPERDOCK_API_SERVER || 'https://***.**
vue项目中配置请求多个服务器解决方案
weixin_43881166的博客
03-31 2563
vue项目中配置请求多个服务器解决方案 解决方案 vue.config.js 配置 devServer: { port: 3000, proxy: { // 第一台服务器配置 '/cgi': { target: 'http://localhost:8005', ws: true, changeOrigin: true, pathRewrite: { '^/cgi': '/cgi' } },
vue项目运行之后自动打开两个窗口
dujyong的博客
06-11 3668
vue项目运行之后自动打开两个窗口,将其改为只打开一个 解决: 找到 config.js 文件下的devServer,把open属性改为false,运行后就不会自动打开了 再在 package.json 中在项目运行命令后加 --open: 问题解决! ...
vue配置多页面应用
lan_学习分享
06-04 1031
转载自：（留着参考，图片复制不过来） https://blog.csdn.net/stiven_lu/article/details/80271012 第一步：使用vue-cli搭建项目（注：建议安装淘宝镜像，使用cnpm执行下面操作） 1.按住shift按钮，右键点击存放项目的文件夹，点击在此处打开命令窗口。 2.在命令窗口中输入 npm install -...
一个vue项目中配置请求多个服务端解决方案
热门推荐
uu的博客
11-02 1万+
前言：最近项目开发中，遇到这么个情况，一个前端项目需要搭配两个服务端接口，所以前端的代理需要重新修改，遂记录 一、解决方案 1.1 描述接口context-path 后端的两个接口服务请求前缀，如下： 前缀1: /mini-rest 前缀2: / 1.2 vue.config.js配置 devServer: { port: 8005, proxy: { // 第一台服务器配置 '/mini-rest': { target: 'http://localhost:80.
Electron+Vue3+Vite+ElectronForge整合 - 一键启动两个服务 & 一键打包两个服务
northcastle的博客
04-30 1984
electron + vue3 + vite + electron-forge 实现一键启动 & 一键打包功能
关于本地vue项目跨域的解决方案
不怕麻烦的鹿丸的博客
07-29 4673
新建一个MyChromeDevUserData文件夹，在文件夹右键开启一个终端，输入以下命令，这时候会自动弹出一个可以跨域请求的浏览器窗口界面。当我们在本地开发vue项目的时候，在对接后端接口会存在跨域问题，这时候可以采用以下方法去解决本地请求接口跨域的问题。根据电脑不同需要改的是。...
一个vue项目配置访问两个服务器地址
程序媛的博客
01-11 5153
一个vue项目，不同模块，需要访问同一个服务器的不同端口。一个项目，其中一个模块A是部署在同一个服务器不同端口，这个时候开发就需要配置不同的访问。开发环境的时候，同一个服务器：10.12.7.99，其中有一个模块A的接口代码部署在8899这个端口，而其他接口的代码部署在6090这个端口。
Vue项目使用多个服务器地址的请求方法
qq_49490164的博客
08-10 2600
3.如果只是少量应用其他服务器地址，可以用axios请求，不用封装的request，但缺点就是上线前记得改线上地址。也可以单独写一个baseAPI引用过去，这样就不用一个一个得改了。2.果项目已经开发很久了，且上线过版本，此时建议封装request2.js文件,虽然笨，但胜在有效，因为贸然更改前人配置好的文件，报错了你可能找不到关键。1.如果项目开发初期，应用多个服务器地址且每个地址都应用十分频繁，建议重新封装request。前两种有时间补上，先放个第三种懒人写法。注意：带上token。...
vue配置请求多个服务端解决方案（vue配置多个后端地址）
snow_living的博客
10-17 5422
多个接口服务的情况下，如果前缀是"/"，要将其放在proxy配置的最后一部分，代理的时候是从上往下查找的，如果放在最上面其他服务也会被该配置代理掉到此这篇关于详解vue配置请求多个服务端解决方案的文章就介绍到这了,更多相关vue配置请求多个服务端内容请搜索知优网以前的文章或继续浏览下面的相关文章希望大家以后多多支持知优网！
vue使用websocket创建连接与重连
microcosm1994的博客
11-27 7323
我自己把websocket封装成一个模块，包括创建连接、发送消息、重连等,里边也封装了一些我自己项目需要的一些功能 Import import ws from '@/assets/lib/ws' Vue.prototype.$ws = ws Use // 创建websocket连接 this.$ws.init(self.$Socket_url, this.ruleForm, functi...
在vue中axios调用多个接口跨域问题
09-05
在Vue中使用axios调用多个接口跨域问题可以通过设置代理来解决。 1. 首先，在Vue项目根目录下找到config文件夹中的index.js文件。 2. 打开index.js文件，找到dev对象中的proxyTable选项。该选项允许我们配置代理。 3. 在proxyTable选项中添加以下代码： ```javascript proxyTable: { '/api1': { target: 'http://localhost:8000', changeOrigin: true, pathRewrite: { '^/api1': '/api1' } }, '/api2': { target: 'http://localhost:8001', changeOrigin: true, pathRewrite: { '^/api2': '/api2' } } } ``` 此处使用了两个接口作为示例，一个是/api1，另一个是/api2。target参数指定了代理的目标地址，需要根据实际情况进行修改。changeOrigin参数用于配置是否跨域，默认为false，需要设置为true。pathRewrite参数用于重写请求路径，可以根据需要进行修改。 4. 保存并关闭index.js文件。 5. 在Vue组件中使用axios调用接口时，只需要将接口的路径改为对应的代理路径，例如： ```javascript axios.get('/api1/users') .then(response => { // 处理接口1的响应 }) .catch(error => { // 处理接口1的错误 }); axios.get('/api2/posts') .then(response => { // 处理接口2的响应 }) .catch(error => { // 处理接口2的错误 }); ``` 以上代码中，/api1和/api2就是代理路径，可以直接在axios中使用。 通过以上步骤，我们成功地解决了在Vue中使用axios调用多个接口跨域问题。注意，在开发环境下使用代理是安全的，但在生产环境要将代理改为实际的服务器地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值