vue中 vue.config.js反向代理

新建一个node 服务 

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

2.npm i express 

3. 新建一个app.js

4.键入代码

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中的代码

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':''
          }
      }
     },
   
  }

})

你可能感兴趣的:(前端)