vue3+vite 项目中如何设置代理

1、在项目的vue.config.ts 文件中

module.exports = {
  devServer: {
    // 配置服务器代理
    proxy: {
      "/prod-api": { // 代理接口前缀为/apis的请求
        "target": 'https://localhost:10001//prod-api', // 对应的代理地址
        "secure": false, // 接受运行在https上,默认不接受
        "changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
        rewrite: (p: any) => p.replace(/^\/prod-api/, ""), //重写路径 比如'/apis/aaa/ccc'重写为'/aaa/ccc'
      },
      // 配置多个代理
      "/service": {
        "target": 'https://www.google.com/',
        "secure": false,
        "changeOrigin": true,
      },
    }
  },
}

2、第二个种方式
在这里插入图片描述
然后这里使用
在这里插入图片描述

  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 + Vite项目使用WebSocket实现通知需要进行以下步骤: 1. 安装WebSocket依赖库 在项目安装WebSocket依赖库,可以使用npm或yarn命令进行安装: ``` npm install --save ws ``` 2. 在Vue3组件创建WebSocket实例 在Vue3组件创建WebSocket实例,可以使用`created`或者`mounted`钩子函数。例如: ```javascript import { reactive } from 'vue'; import WebSocket from 'ws'; export default { name: 'WebSocketDemo', setup() { const state = reactive({ messages: [] }); const ws = new WebSocket('ws://localhost:3000'); ws.onopen = () => { console.log('WebSocket opened'); }; ws.onmessage = (event) => { state.messages.push(event.data); }; ws.onclose = () => { console.log('WebSocket closed'); }; return { state, ws }; } }; ``` 在示例,我们使用`reactive`创建了一个响应式的状态对象`state`,其包含一个`messages`数组用于存储WebSocket接收到的消息。然后我们使用`new WebSocket()`创建了一个WebSocket实例,并设置了`onopen`、`onmessage`、`onclose`等事件回调函数。当WebSocket连接成功打开时,`onopen`事件会被触发,我们在事件回调函数输出`WebSocket opened`日志;当WebSocket接收到消息时,`onmessage`事件会被触发,我们将接收到的消息存储到`state.messages`数组;当WebSocket连接关闭时,`onclose`事件会被触发,我们在事件回调函数输出`WebSocket closed`日志。最后,我们将`state`和`ws`对象返回给组件模板使用。 3. 在Vue3组件使用WebSocket接收消息 在Vue3组件模板使用`v-for`指令循环渲染`state.messages`数组的消息,例如: ```html <template> <div> <ul> <li v-for="message in state.messages" :key="message">{{ message }}</li> </ul> </div> </template> ``` 在示例,我们使用`v-for`指令循环渲染`state.messages`数组的每一条消息,通过`:key`指令设置每一条消息的唯一标识符。当WebSocket接收到新的消息时,这些消息会自动更新到模板。 4. 在Vite配置文件添加WebSocket代理 由于Vite使用的是开发服务器,需要在Vite配置文件添加WebSocket代理,将WebSocket请求转发到后端服务。例如: ```javascript export default { server: { proxy: { '/ws': { target: 'ws://localhost:3000', changeOrigin: true, ws: true } } } }; ``` 在示例,我们使用`proxy`字段设置WebSocket代理,将请求路径`/ws`转发到后端服务`ws://localhost:3000`。同时设置`changeOrigin`为`true`表示跨域请求,`ws`为`true`表示使用WebSocket代理。 通过以上步骤,我们就可以在Vue3 + Vite项目使用WebSocket实现通知功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值