vue中 vue.config.js反向代理

m0_627827522025-04-27 23:50

新建一个node 服务

2.npm i express

新建一个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':''
          }
      }
     },
   
  }

})