vite项目一直在无限刷新，重连ws

已于 2023-03-21 09:57:33 修改
阅读量1.2k 收藏
点赞数
分类专栏： vite 文章标签： javascript 开发语言 微信小程序 react.js
于 2022-11-08 11:22:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kabudada/article/details/127747316
版权

项目背景：react + vite 开发企业微信内部应用（h5），因为企业微信无法在本地调试，所以用了ngrok内网穿透工具可以帮助开发者将应用开发调试过程中的回调请求，穿透到本地的开发环境。

连了之后在首页获取code的时候，一直在重启项目

在网上查了资料，在server:{}里加入

     hmr: {

        protocol: "ws",

        host: "127.0.0.1",

      },

就可以了

kabudada
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
我修复了一个 Vite Bug，让我的项目首屏性能提高了 25%
sybh的博客
11-18 432
文章就写到这了，第一次给 Vite 贡献代码，的确有点小激动。虽然是一个小小的 bug，但实际上过程是充满坎坷的，每一个小小的问题都能研究几天，但最后回顾起来，这个过程学到了很多收获还是非常大的。如果这篇文章对您有所帮助，👍，您的鼓励是我创作路上的最大的动力。Candy 的修仙秘籍（点击可跳转）
vite项目无限刷新
前端劝退工程师
04-01 8002
用公司的一个小项目试了把vite 启动是真的快 但是突然出现开发环境无限刷新 控制台报错一闪而过 定位到vite源码 是websocket连接问题 把server改成https试试 就解决了！！！
Vite的React快速刷新插件-React开发
05-27
为Vite提供React快速刷新支持。 vite-plugin-react为Vite提供React快速刷新支持。 注意：Vite要求使用@ pika / react和@ pika / react-dom，它们是官方React软件包的ESM镜像。 这个插件会自动为您注入正确的别名，因此您可以照常从“React”中导入React。 默认情况下，此插件包含在create-vite-app React模板中。 // vite.config.js module.exports = {jsx：'react'，插件：[require（'vite-plugin-react'）]}}
vite+vue2的项目基础包.zip
01-24
本压缩包是vite搭建vue2的项目基础包，使用者解压后，npm install，然后 npm run serve。 这样就能正常运行项目了。亲测好用，欢迎下载使用。 更改为vite+vue2的原因。 原来使用的是webpack，怎么调试都不太好使，最后看到官方使用的是vite，然后就打算更改webpack为vite来解决这一个问题。 这里面要注意要含有vite-plugin-vue2 和 vite。 配置文章介绍： https://dajianshi.blog.csdn.net/article/details/135815464
vite搭建vue3项目
09-06
vite搭建vue3项目
【vite】本地打包【vue2.7】 【ant-design-vue1.x】项目
FortheOne的博客
11-13 439
现有vue项目接入vite实现本地打包运行。因为是vue2.7和ant-design-vue1.x的老项目，所以遇到很多问题，本文作了简要记录。
解决vite在远程开发服务器上的反复刷新问题
sayUonly的博客
02-03 1189
由于现在身兼数职，工作上增加了出差的特性，我选择了一台商务本作为自己的新设备。但是这样的话，在开发的时候性能上就有些捉襟见肘了。为了兼顾商务和开发的需求，我将之前的开发本做成了一台linux开发服务器，用于支持我的开发工作。是一个高级选项，只在客户端的情况下覆盖端口，这允许你为 websocket 提供不同的端口，而并非在客户端代码中查找。抓取错误发现，是vite的websocket服务端口号不对。因此这里需要调整一下hmr的配置。但是在运行基于vite的开发服务过程中，我发现vite一直在不断重新链接。
记录Vite3打包发布后刷新总是跳转到404页面问题的解决
nnslyx的博客
09-24 3785
配置nginx设置，解决Vite3打包发布后刷新总是跳转到404页面的问题
Nginx服务、Vite项目如何设置ws（websocket）代理？
咚の窝
12-05 8909
最近干活中遇到请求访问地址代理的问题，http请求代理到是没啥问题，主要是WebSocket代理配置，今天折腾了一上午加下午一小时，才将其配置好，主要是部署服务器的时候nginx这一块不太清楚，作为一个初级前端，确实还有待提高。本文主要细致的讲解一下ws代理如何设置，在开发环境主要是vite代理设置方法，生产环境给Nginx设置代理。在代码编写过程中，主要是url应该如何拼写，下面是项目中使用的请求地址： 这里的地址需要注意，这个是拦截代理的标志（ps：这里也可以写别的路径替换，它不是必须的，但是后面配置需
vite vue3 代理发布不停自动刷新的问题
借人之智，完善自己
12-10 4955
vue3 vite 使用代理发布，不停的网页更新
由于浏览器有缓存机制，vue前端打包部署到服务器后，必须手动刷新浏览器才能加载新的修改。如何配置前端自动加载最新的修改
weixin_45930427的博客
05-10 2143
在打包生成后跳转连接的时候判断 version 版本,从而看是否刷新整个页面,源码如下。可以创建一个静态文件 version.json。在生成的时候重新生成 version.json。
wp2vite:一键让webpack项目支持vite
04-01
wp2vite不会删除您的webpack配置，但会将vite配置注入到您的项目中以支持vite。 开发速度比webpack快80％，构建速度比webpack快50％。 React 无论是否执行弹出，都支持由react项目 支持创建的react项目 支持创建的...
Vite+vue3+ts 项目初始化底座
02-21
qingqiu
03｜从Rollup到Vite：如何用Vite构建你的Vue3项目？
sucaiwa的博客
03-01 822
又到每一节课的总结时间，我们这节课主要从“Rollup配置Vue.js 3项目”到“Vite配置Vue.js 3项目”，通过对比来介绍Vite的技术理念和使用方式，更多Vite的使用方式可以查看官方文档。与此同时，这节课也不是简单介绍Rollup和Vite的配置项目，而是通过一个对比，让你能知道Vite是作为官方标配工具的原因和演进历程。这些技术工具演进历程，可以让你在做企业级项目时候，可以在技术选型上做参考。
vite build打包后页面不能正常访问解决方法
qq_39111074的博客
04-19 4519
vite build打包后页面不能正常访问解决方法
nginx部署vite4+vue3项目（解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等）
爱吃雪糕的小布丁的博客
08-17 2736
解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等
ant-design-vue在vite按需加载时页面刷新reloading
byx1216的博客
06-16 907
新路由加载时vite会对相关依赖项进行编译，触发依赖更新导致页面重启。
webpack之模块热加载
wyzqhhhh的博客
04-15 554
首先在webpack-dev-sever启动后，会实现一个轮询机制，就是定时的去查看文件是否修改，我们可以通过配置watch和watchOptions去配置，当检测到有文件改变时会重新进行编译，并将编译后的结果保存到内存中，没有写入到文件夹中，所以不会生产dist文件，加快了读取速度，减少I/O带来的性能问题。首先tree-shark是基于ES的模块导入实现的，由于ES的模块导入是静态导入，可以在执行前静态分析导入模块是否被使用，从而不会被打包。然后使用 Terset插件删除这些没有被使用的导出值。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 416
步骤很详细，直接上教程……
vite项目如何在index。
05-30
Vite项目中，可以通过在index.html文件中添加自定义的HTML代码，来实现一些自定义的功能，如引入第三方库、设置页面标题等。以下是在Vite项目中如何在index.html添加自定义代码的步骤： 1. 在项目根目录下创建一个public文件夹。 2. 在public文件夹中创建index.html文件。 3. 在index.html文件中添加自定义的HTML代码，如： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Vite Project</title> <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"> </head> <body> <div id="app"></div> <script src="/src/main.js"></script> </body> </html> ``` 在这个例子中，我们添加了一个标题、引入了Element Plus UI库的CSS文件、以及引入了JavaScript入口文件。 需要注意的是，Vite默认会将public文件夹中的内容复制到打包输出的根目录下，因此在index.html中引入JavaScript入口文件时，需要使用相对路径。 另外，如果需要在自定义的HTML代码中使用环境变量，可以在代码中使用模板字符串来引用环境变量，如： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>${process.env.VITE_APP_TITLE}</title> </head> <body> <div id="app"></div> <script src="/src/main.js"></script> </body> </html> ``` 在这个例子中，我们使用了Vite的环境变量VITE_APP_TITLE来设置页面标题。 以上就是在Vite项目中如何在index.html添加自定义代码的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值