run build打包之后axios能连上，websocket连不上问题已解决

最新推荐文章于 2024-08-01 22:26:26 发布
最新推荐文章于 2024-08-01 22:26:26 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： java 文章标签： websocket vue.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41884662/article/details/120027331
版权

网上很多人说vue.config文件下换成绝对路径，我觉得然并卵
前端url配置：
在这里插入图片描述
生产环境的url为服务端的ip
后端配置：
在这里插入图片描述
前端websocket配置：可以改成生产环境对应的api
在这里插入图片描述

前端build之后将dist文件夹下的文件复制粘贴放入后端static文件夹下，然后后端进行封装，注意这个时候封装成的html我理解的是是静态文件，而大多数时候我们使用websocket传输数据是一种动态建立传输：我打开后可以试用axios连接后端，静态数据也可以展示
在这里插入图片描述但是websocket所传输的动态数据一直没有出来，后来连续在网上找方法都没有思路，偶然间我直接在网站输入了127.0.0.1:8887（也可以输入生产环境的ip和端口，不过记得websocket链接那个地方也改成生产环境的url）之后发现竟然可以连上websocket，恍然大悟，原来所有的链接都已经封装进了后端jar文件，jar文件启动的时候这个ip对应端口已经打开了，那个直接用浏览器链接就可以了

在这里插入图片描述
在这里插入图片描述
于是乎：自己写了个html文件跳转那个ip接口：
在这里插入图片描述
websock传输正常！
在这里插入图片描述
后来在linux arm64服务器上测试，成功实现：
前端正常
在这里插入图片描述
后端正常
在这里插入图片描述

秦枫-_-
关注
专栏目录
electron 主进程中使用websocket与java服务端通信
梦一样的博客，神话般的感觉
12-01 2836
客户端： electron-vue+elementui 开发工具：WebStorm electron:11.0.3 vue:2.5.16 element-ui:2.14.1 服务器: netty+websocket+spring 开发工具:IdeaJ netty:4.1.53.Final spring:5.1.10.RELEASE 废话不多说，对于程序员来讲。直接看代码比长篇大论的来的快，看的明白，更直观。关键的地方我会另行说明。 服务端： pom.xml <?xml version=".
websocket 连接本地端口_websocket本地测试通过，但是生产环境下一直连接不上
weixin_39750190的博客
12-20 2428
使用swoole来做websocket，开发环境测试通过，测试细节是：后端：swoole监听0.0.0.0,端口9503.html页面使用：ws//192.168.1.101:9503能够连接，ws//127.0.0.1:9503能够连接。开发环境遇到问题，测试细节是：后端：swoole监听服务器IP A.B.C.D,端口9503.进程开启失败，提示[2015-08-12 16:57:23 @98...
websocket本地正常,部署到服务器连不上
qq_42190640的博客
02-14 6226
线上连接错误 解决方法： 1.开放服务器端口 2.用IP地址加端口连接 websocket = new WebSocket(`ws://119.23.41.159:9985/api/bigdata`)
WebSocket在Java Spring Boot+Vue框架中实现消息推送功能
最新发布
招风的黑耳CSDN
08-01 1199
在现代Web应用中，实时消息提醒是一项非常重要的功能，能够极大地提升用户体验。WebSocket作为一种在单个TCP连接上进行全双工通信的协议，为实现实时消息提醒提供了高效且低延迟的解决方案。本文将详细介绍如何在Java Spring Boot后端和Vue前端框架中利用WebSocket实现消息提醒功能。
React/Vue项目-请求文件封装（Axios，WebSocket）
StupidlyGrass的博客
06-21 476
【代码】React/Vue项目-请求文件封装（Axios，WebSocket）
记一次打包vue，ios真机调试和打包安装都出现 Network Error
weixin_45878530的博客
03-16 499
将axios原码的请求方式 var request = new XMLHttpRequest() 改为 var request = new plus.net.XMLHttpRequest()
引入Websocket后，本地测试不报错，打包时报错
weixin_40969076的博客
12-27 1074
因为需要编写一个WebSocketConfig配置类，注入对象ServerEndpointExporter以供后面的业务使用，类上只有@Configuration这个注解，本以为加上 @Component 手动交给容器管理就行了，发现问题未解决，还是其他地方出问题的 后查询资料知道，原来是springboot内置的Tomcat会与websocket的jar部分冲突，这时只需打包的时候跳过测试即可...
axios-ajax-WebSocket紧急救援
景姑娘的肥猫
04-30 1305
axios-ajax简单应急交互 搜索网上大量的ajax-axios项目交互，都是零散的，所有总结一个应急的，全面的，救急以下当下需要的 1、ajax 终止请求：abort() 一个简单的ajax，仅供入门学习使用 /** * 调用SendAjax，调用接口 * @param {obj} object method:请求方式，url:地址，success:请求成功回调 */ function SendAjax (obj) { function createAJAX () {
uniapp中webSocket使用Https访问连接失败
hwxjava的博客
07-04 507
但是微信小程序需要配置https访问，webSocket需要使用 wss:// 来连接，uniapp写微信小程序，使用webSocket连接后台spring boot通信。使用wss:// 域名 访问时，一直连接不上，多方查找发现，需要在 服务器的nginx的443转发上加一个配置。在开发环境中使用 ws://xxx 连接正常，
Social_Network_2_App:React，Redux，Hooks，Websocket，React-Bootstrap，Thunks，Axios
05-14
npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的...
vue-cil4 打包优化(详细到脚指)
icon_Lx的博客
10-07 605
首先项目开始时webpack配置 vue-cli3以后，我们修改webpack配置，需要自己在项目的目录根路径下创建vue.config.js文件。 1、配置 proxy 跨域 使用vue-cli开发项目，本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域的问题： 配置完成后，当我们在去请求https://www.test.com/v1/api/userinfo接口时，就可以这么写： 2、配置alias别名 使用vue-cli开发项目，最大特色...
vue-socket.io接收不到数据问题的解决方法
10-15
主要介绍了解决vue-socket.io接收不到数据问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目分环境配置打包处理
总结前端开发中遇到的问题，分享前端知识
11-26 1329
vue项目分环境配置打包处理主要包括几方面：本地环境配置；生产环境配置；打包处理；打包配置处理（扩展）
项目vue-cli4打包以及优化
zy的博客
01-14 2524
一、vue项目的打包： 可以执行一下代码，在vue-cli中自有打包指令，进行打包，但是为了打包后的大小考虑，还需要在项目的开始前以及结束后，进行相应的操作，对项目打包进行优化，是项目的所占体积变小 npm run build //使用npm打包 cnpm run build //使用cnpm打包 yarn build //使用yarn打包 二、项目开始前的配置： 在项目根路径下创建vue.config.js文件，以修改webpack配置。 1. 配置跨域 使用vue-
websocket
hellowXDW的博客
08-16 292
webSocket优点 webSocket是HTML5中的协议，支持持久连接；而Http协议不支持持久连接。 可以由服务器主动发起 缺点 不兼容低版本的IE 解决长连接的其他办法 1）ajax轮询 ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息 其他说明 Websocket只需要一次HTTP握手，所以说整个通讯过程是建立在一次连接/状态中 W...
解决SpringBoot集成WebSocket打包失败问题
萨丁
12-20 4869
前言:  这几天在一个SpringBoot项目中使用WebSocket来用作客服聊天以及上传文件功能,项目在写的时候,以及在idea中跑的时候都非常完美,结果一打成jar包是,报错.在网上查了报错原因,原来是自己导入的WebSocket的jar与SpringBoot内置tomcat中的WebSocket的jar冲突,需要在打包时把SpringBoot内置tomcat的jar给忽略掉,于是找到两个...
uniapp微信小程序连接websocket报错1006 abnormal closure
m0_73761441的博客
06-09 919
uniapp微信小程序连接websocket报错1006 abnormal closure
关于uniapp上使用websocket在H5能用，在真机不能用的问题
weixin_56663198的博客
03-21 910
不要用本地电脑开的websocket来连接，真机（手机端）连不到本地websocket。部署到服务器上面，用一个公网的websocket地址，真机上面可以正常使用。部署到服务器的时候记得开放3000端口，不然也不行。
websocket数据长了传不过来_一个 WebSocket 服务器是如何开发出来的？
weixin_39614657的博客
11-25 354
WebSocket 协议是为了解决 http 协议的无状态、短连接(通常是)和服务端无法主动给客户端推送数据等问题而开发的新型协议，其通信基础也是基于 TCP。由于较旧的浏览器可能不支持 WebSocket 协议，所以使用 WebSocket 协议的通信双方在进行 TCP 三次握手之后，还要再额外地进行一次握手，这一次的握手通信双方的报文格式是基于 HTTP 协议改造的。WebSocke...
vite 打包后解析不到axios 怎么解决
07-08
如果在使用 Vite 打包后无法解析到 axios 模块，可以尝试以下解决方法： 1. 确保已经在项目中安装了 axios 模块。你可以使用以下命令进行安装： ``` npm install axios ``` 2. 确保你的代码中正确引入了 axios 模块。在你的代码文件中，使用以下语句来引入 axios： ```javascript import axios from 'axios'; ``` 或者，如果你的代码是使用 CommonJS 的模块语法编写的，可以使用以下语句： ```javascript const axios = require('axios'); ``` 3. 在 Vite 的配置文件 `vite.config.js` 中添加别名配置，以确保能够正确解析模块路径。在 `resolve.alias` 部分添加以下配置： ```javascript import { defineConfig } from 'vite'; export default defineConfig({ // other config options... resolve: { alias: { 'axios': 'axios/dist/axios.js', }, }, }); ``` 这样会将 axios 模块的路径指向正确的位置。 4. 如果问题仍然存在，可以尝试重新安装依赖项并重新构建项目。可以执行以下命令来清除旧的依赖项并重新安装： ``` rm -rf node_modules npm install ``` 然后重新构建你的项目。 通过以上步骤，应该能够解决 Vite 打包后无法解析到 axios 模块的问题。如果问题仍然存在，请检查你的代码和依赖项是否正确配置，并确保 axios 模块已经正确安装。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值