vue中 vue.config.js反向代理

新建一个node 服务

1 npm init -y //创建一个package.json

2.npm i express

  1. 新建一个app.js

4.键入代码

javascript 复制代码
const express = require("express")
const app = express()

app.get("/user",(req,res)=>{
    res.send({"name":"good"})
})
app.listen(3200)

5.启动node --node app.js

6.浏览器中 http://127.0.0.1:3200/user----测试查看返回数据


vue 文件

1.找到vueCli文档 devSever对应的proxy

2.vue中的vue.config.js 复制对应的代码

3.vue项目重启

注意多向代理的时候需要写地址

this.$http.get("/api/user").then(res=>{。。。})

webpack 中文文档---指南--开发 --webpack -dev-serve

vue.config.js中的代码

javascript 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
   devServer: {
     proxy: {
       '/api': {
         target: 'http://127.0.0.1:3200',
         ws: true,
         changeOrigin: true,
          pathRewrite:{
            '^/api':''
          }
      }
     },
   
  }

})
相关推荐
鱼樱前端7 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig1 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少1 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix1 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句1 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易1 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟1 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子1 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao2 小时前
网安-XSS-pikachu
前端·安全·网络安全