【问题】html页面不能自动更新，重启项目也不行。package时可以。

最新推荐文章于 2023-04-30 09:59:17 发布
原创 最新推荐文章于 2023-04-30 09:59:17 发布 · 680 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决HTML页面无法自动更新的问题，提供了两种解决方案：一种是通过打包的方式解决，另一种是使用快捷键Ctrl+Shift+F9来刷新页面。
【问题】html页面不能自动更新，重启项目也不行。package时可以。

 

解决1：packge

 

解决2：ctrl +shift +F9

Legolas4
关注
SpringBoot 系列教程(六十一)：Spring Boot 修改静态资源不用重启项目，一个LiveReload（自动刷新）全搞定
Thinkingcao的专栏
10-18 1836
一、前言 在使用SpringBoot快速开发框架，进行Web项目开发编码的时候，每次对文件进行更改之后，都要手动重启项目，SpringBoot热部署估计大家都用过，只需要添加 spring-boot-devtools 依赖就可以轻松实现热部署 二、热部署devtools 1、热部署插件的原理： Spring Boot 中热部署最最关键的原理就是两个不同的 classloader： ...
iOS热更新实战指南：原理与落地
本博客聚焦游戏开发技巧、创业实战心得及大学热门课程干货。这里既有技术深度，也有思维广度，无论你是开发者、创业者还是高校学子，都能在这里找到适合自己的成长之路！
01-31 649
iOS热更新机制深度解析 摘要：本文系统介绍了iOS热更新技术，包含8000字的深度解析，分为10大章节。从基础原理出发，阐明热更新是让已安装APP在线获取新功能/资源而无需重新发版的技术，能有效解决苹果审核周期长、紧急bug修复等问题。重点分析了苹果政策限制（允许资源更新但限制代码热更），并详细对比了主流技术方案：资源热更新（图片、配置文件）、脚本解释方案（JS/Lua）及混合方案。文章还涵盖企业级实现流程、工具框架、团队协作要点，并指出常见误区（如误以为可任意替换代码）。最后通过实战案例展示典型应用场景
解决webpack html 不能自动刷新的问题
lxj的博客
06-13 5052
很久之前出于项目需要，做了一个多页面的webpack3配置，遇到在dev-server开发时html不能修改自动更新的问题，多方查找后勉强找到了一个折中的方法，不美观算但是能凑合着用，这段时间看webpack4页稳定了而且据说都快出5就寻思着要是不赶紧弄一个的话真的对不起自己切图仔的身份，于是… 发现webpack4依然不能使用官方的方法实现这个功能，不过勉强算是找到了不用入侵生产代码的方法，在...
html修改后页面不更新
YfaWu的博客
04-30 3324
因此，在开发和测试阶段建议关闭Thymeleaf缓存。无法查看最新的修改：如果你在开发过程中对模板文件进行了修改，但是Thymeleaf没有关闭缓存，则你无法立即看到修改后的结果。页面无法及时更新：Thymeleaf默认启用缓存，如果不关闭缓存，则页面内容可能会被缓存起来，导致页面无法及时更新。记录一下自己之前修改前端代码中遇到的问题，html中的代码进行修改但是页面没有及时更新。测试困难：由于页面内容被缓存起来，测试人员很难快速地测试页面效果。
Eclipse开发中GlassFish 4 重启页面不刷新
weixin_30905133的博客
02-19 99
现在项目开发用GlassFish4做服务器，测试了几个web项目出现问题，每次编辑源代码后页面不能按照最新编辑好的代码显示。 一次重新运行web项目在服务器上看到publish，点击后运行的是新编辑的代码，随发现GlassFish运行新编辑的代码不用重启，而是用publish。 之前学习，开发都是用的Apache Tomcat，对GlassFish不了解；希望得到各位使用GlassF...
【web】关于修改html代码后网页不更新问题(自用)
daixd5520的博客
04-16 4934
清理浏览器缓存即可. 右上角三个点–>设置–>隐私、搜索和服务–>清除浏览数据 就完事了
基于Node.js的JavaScript、CSS、HTML个人博客项目设计源码
02-16
nodemon.json文件则可能配置了nodemon工具，这是一个常用于开发过程中自动重启Node.js应用程序的工具，使得开发者在修改代码时，能够立即看到更改的效果，提高开发效率。 基于Node.js的JavaScript、CSS、HTML个人...
相关业务问题+系统问题+设计问题整理统计
热门推荐
曾经“等你生日那天”都遥远得像未来，如今却可欢愉的挥手说“下个十年见”
04-07 171万+
业务系统及其他相关面试问题整理：线上相关问题排查+高并发系统的限流+高并发秒杀系统设计+负载均衡+一个网站有 20 亿 url 存在一个黑名单中，这个黑名单要怎么存？若此时随便输入一个 url，你如何快速判断该 url 是否在这个黑名单中？并且需在给定内存空间（比如：500M）内快速判断出？
Vue项目vscode 安装eslint插件的方法(代码自动修复)
11-20
通过上述步骤，你现在已经在VSCode中成功安装并配置了ESLint插件，可以实时检测和自动修复Vue项目中的代码风格问题。这将大大提高你的编码效率，同时保证代码质量。请根据你的实际项目需求调整规则，以达到最佳的...
fedora安装R包devtools
HQXZCY的专栏
02-20 708
在fedora系统上安装R包devtools
更改html代码后网页不更新
weixin_30684743的博客
04-18 8420
写了一个非常简单的 html 页面，只有简单的跳转功能，但是在 Eclipse 下更改代码后用 chrome 浏览器打开时还是显示原来的网页。开始我以为是网页有错误或者有不规范的地方，因为我编写的是 html5 页面，但是用的是 html4 的写法，然后 Eclipse 在不规范的地方下有黄线提示（但是有些和规范无关的地方为什么也有黄线？）. 然后我试着把页面改成 html5 的规范...
springboot项目中访问不到html页面问题
sinJack的博客
06-15 4万+
描述： 搭建了一个简单的springboot项目。启动时通过请求访问页面。发现报404页面找不到。 项目结构： 导入thymeleaf的依赖。 templates目录 controller层 分析问题： 仔细的读者，应该能很快看出来什么问题导致的。粗心大意的我，搞了大半天才发现是依赖的问题。 应该导入与springboot整合的thymeleaf依赖。正确的依赖如下： 说明： 1、Thymeleaf模版默认会使用templates作为视图文件夹，默认以/templates作为前缀，
修改html,js,class而不用重启项目
星游LK的笔记
08-24 1029
修改html,js,class而不用重启项目 比热部署还好用热加载快捷键Ctrl + F9 热加载是什么？ 编译快捷键，热加载 Build project 快捷键Ctrl + F9 ,按下Ctrl + F9 让修改的地方再编译一下 什么场景使用？ 在小修改html js class 时，而不用将项目停了再重启。也就时在开发过程中的代码微调，主要是不需要重启。 为什么要用热加载快捷键？ 开发的过程中...
项目中js文件修改后浏览器不能及时更新的解决办法
weixin_33720078的博客
05-06 1518
2019独角兽企业重金招聘Python工程师标准>>> ...
vscode本地运行php项目如何实现保存自动更新
最新发布
10-14
<think>我们正在寻找在VSCode中本地运行PHP项目时，实现保存自动更新的方法。根据引用[1]和[2]提供的信息，我们可以尝试以下步骤： 引用[1]提到VSCode中如何设置自动保存，虽然该设置是针对Vue项目的，但自动保存的设置是全局的，所以同样适用于PHP项目。此外，引用[2]提到了在Mac上配置VSCode调试PHP，其中涉及到了xdebug扩展，这可能与我们的需求相关，因为xdebug可以用于开发调试，但实现自动更新可能需要其他工具。 注意：PHP是一种服务器端脚本语言，通常需要服务器（如Apache、Nginx）来运行。因此，实现保存自动更新通常指的是当我们修改了PHP文件后，服务器能够自动重新加载，或者浏览器能够自动刷新。但是，由于PHP是在服务器端执行的，我们通常需要以下两种方式之一： 1. 服务器支持自动重新加载（例如，使用开发服务器并启用自动重载功能）。 2. 使用前端工具（如浏览器扩展）来监测文件变化并自动刷新浏览器。 然而，在VSCode中，我们可以通过以下方式来实现类似效果： 步骤1：设置VSCode自动保存 在VSCode中，我们可以设置自动保存，这样当我们修改文件后，VSCode会自动保存文件。设置方法如下： - 打开VSCode，点击左下角的设置图标（或者通过菜单：文件 > 首选项 > 设置）。 - 在设置搜索框中输入“自动保存”。 - 选择“files.autoSave”选项，可以设置为“afterDelay”（在延迟后自动保存）、“onFocusChange”（当编辑器失去焦点时自动保存）或“onWindowChange”（当窗口失去焦点时自动保存）。通常选择“onFocusChange”或“afterDelay”。 步骤2：使用PHP内置服务器并配合自动重载工具 PHP内置服务器（从PHP5.4开始提供）本身不支持自动重载。因此，我们需要额外的工具来监视文件变化并重启服务器或刷新浏览器。 方法一：使用第三方工具监视文件变化并刷新浏览器 1. 安装Live Server扩展（用于前端自动刷新）： - 如果你有前端页面（如HTML、JavaScript等），可以使用VSCode的Live Server扩展。在扩展商店中搜索“Live Server”并安装。然后，在PHP项目中的HTML文件上右键选择“Open with Live Server”，这样当你保存文件时，浏览器会自动刷新。 - 注意：由于PHP是服务器端语言，如果你修改了PHP文件，Live Server不会重新执行PHP，因此你可能需要结合其他方法。 方法二：使用文件监视工具重启PHP内置服务器 我们可以使用一个文件监视工具（如nodemon）来监视文件变化，然后重启PHP内置服务器。 步骤如下： 1. 确保你已安装Node.js和npm（因为nodemon是基于Node.js的）。 2. 全局安装nodemon：打开终端，运行命令： ```bash npm install -g nodemon ``` 3. 在项目根目录下创建一个启动PHP服务器的脚本（例如，server.php）或者直接使用命令行启动PHP服务器。然后，使用nodemon来监视文件变化并重新启动服务器。 例如，假设我们的项目在`./public`目录下，我们可以创建一个名为`start.sh`的脚本（在Unix系统上）： ```bash #!/bin/bash php -S localhost:8000 -t public ``` 然后，给这个脚本执行权限： ```bash chmod +x start.sh ``` 然后，使用nodemon来运行这个脚本，并监视项目目录下的文件变化： ```bash nodemon --watch . --ext php --exec ./start.sh ``` 或者，我们可以将命令直接写在`package.json`中，然后使用`npm run dev`来运行。 方法三：使用专门为PHP设计的开发工具 例如，使用Laravel Valet（仅限Mac）或Laravel Mix等工具，但这些通常与框架相关。 方法四：使用BrowserSync BrowserSync可以监视文件变化并自动刷新浏览器，同时支持代理。我们可以将BrowserSync配置为代理到PHP服务器。 1. 首先，确保Node.js已安装。 2. 在项目目录下初始化npm： ```bash npm init -y ``` 3. 安装BrowserSync： ```bash npm install browser-sync --save-dev ``` 4. 创建一个配置文件（如`bs-config.js`）： ```javascript module.exports = { proxy: "localhost:8000", // 代理到你的PHP服务器地址 files: ["**/*.php", "**/*.html", "**/*.js", "**/*.css"], // 监视的文件扩展名 reloadDelay: 1000, // 延迟刷新，确保PHP服务器已重启（如果有重启的话） }; ``` 5. 在`package.json`的`scripts`中添加： ```json "scripts": { "serve": "browser-sync start --config bs-config.js" } ``` 6. 同时，我们需要运行PHP内置服务器（在另一个终端）： ```bash php -S localhost:8000 -t public ``` 7. 然后运行BrowserSync： ```bash npm run serve ``` 这样，当你修改了文件并保存时，BrowserSync会刷新浏览器。 注意：如果你修改的是PHP文件，BrowserSync会刷新浏览器，然后浏览器会重新向服务器请求页面，从而得到更新后的内容。但是，如果PHP服务器没有重新加载，那么它可能不会执行新的代码（因为PHP内置服务器默认不会重新加载）。因此，我们可能需要结合nodemon来重启PHP服务器（如上方法二），然后将BrowserSync代理到PHP服务器。 总结：最完整的方案是同时使用nodemon重启PHP服务器和BrowserSync刷新浏览器。但这样需要运行两个进程。 为了简化，我们可以使用一个工具`concurrently`来同时运行两个命令： 1. 安装concurrently： ```bash npm install concurrently --save-dev ``` 2. 在`package.json`中配置： ```json "scripts": { "start:php": "nodemon --watch . --ext php --exec 'php -S localhost:8000 -t public'", "start:bs": "browser-sync start --config bs-config.js", "dev": "concurrently \"npm run start:php\" \"npm run start:bs\"" } ``` 3. 然后运行： ```bash npm run dev ``` 这样，当我们修改PHP文件时，nodemon会重启PHP服务器，同时BrowserSync会刷新浏览器。 注意：以上步骤中的路径（例如`public`）需要根据你的项目结构调整。 引用[2]中提到了xdebug，虽然xdebug主要用于调试，但也可以用来实现更高级的开发功能，不过对于自动更新而言，xdebug并不是必须的。因此，我们主要采用上述方法。 最后，为了在VSCode中实现自动更新，我们还需要确保VSCode中的自动保存已经设置好，这样当我们在编辑器中修改文件后，文件会立即保存，从而触发nodemon和BrowserSync。 以上方法在Windows、macOS和Linux上均可使用，但命令可能略有差异（例如在Windows上，启动PHP服务器的命令可能需要使用批处理文件）。 希望这些步骤可以帮助你在VSCode中本地运行PHP项目时实现保存自动更新。 </think>在VSCode中实现PHP项目保存自动更新的方法，主要通过以下步骤实现： ### 🔧 解决方案步骤 1. **安装PHP开发环境** - 确保已安装PHP和Web服务器（如Apache/Nginx） - 通过终端验证：`php -v` 2. **配置VSCode自动保存** - 打开设置（`Ctrl + ,` 或 `Cmd + ,`） - 搜索 `files.autoSave` → 选择 `afterDelay` 或 `onFocusChange` - 推荐设置（添加至`settings.json`）： ```json { "files.autoSave": "afterDelay", "files.autoSaveDelay": 500 // 单位毫秒 } ``` 参考：[百度经验-设置自动保存](https://jingyan.baidu.com/article/f25ef25486bd5c482c1b82b8.html)[^1] 3. **启用Xdebug热重载（关键步骤）** - 确保安装Xdebug扩展： - 查看扩展位置（Mac）：`/usr/lib/php/extensions/no-debug-non-zts-*/xdebug.so` - 在`php.ini`添加： ```ini zend_extension=xdebug.so xdebug.mode=develop,debug xdebug.start_with_request=yes xdebug.log=/tmp/xdebug.log # 可选日志 ``` 参考：[Mac配置vscode调试PHP](https://blog.csdn.net/ywl570717586/article/details/79754543)[^2] 4. **配置PHP内置服务器热更新** - 在项目根目录启动服务器： ```bash php -S localhost:8000 -t public ``` - 结合`nodemon`实现文件监听（需Node.js环境）： ```bash npm install -g nodemon nodemon --exec "php -S localhost:8000 -t public" --watch ./ ``` 5. **浏览器实时刷新（可选）** 安装VSCode扩展 **Live Server**： - 扩展商店搜索 `Ritwick Dey.Live Server` - 右键PHP文件 → `Open with Live Server` - 修改文件后浏览器自动刷新 ### 🌟 验证效果 1. 修改PHP文件 → 保存 2. 观察： - 终端显示服务器自动重启 - 浏览器页面自动刷新（使用Live Server时） - Xdebug会话保持连接状态（调试时） > ⚠️ 注意：PHP是服务端语言，需服务器重启才能加载新代码。上述方案通过监听文件变化触发服务器重启，模拟"热更新"效果。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值