uni-app VUE3-CLI H5环境下.js文件不会热重载

uni-app VUE3-CLI H5环境下.js文件不会热重载

示例代码：

<script setup>  
import { test} from '../../utils/common.js';  
test();  
</script>

export function test() {  
    console.log('tset function');  
   // console.log('test2 function executed');  
    return true;  
}

操作步骤：

  • 默认注释console.log(‘test2 function executed’); 在H5 app中只打印一次。 去掉后 h5打印一次,app打印两次.

预期结果：

实际结果：

bug描述：

这是一个VUE组件中的一段代码， 在H5中修改.JS文件不会触发重载(已确认不是缓存),在安卓端是正常的.


| 信息类别       | 信息内容          |
|----------------|-------------------|
| 产品分类       | uniapp/H5         |
| PC开发环境     | Windows           |
| PC操作系统版本 | 10                |
| HBuilderX类型  | 正式              |
| HBuilderX版本  | 4.76              |
| 浏览器平台     | Edge              |
| 浏览器版本     | 140.0.3485.54     |
| 项目创建方式   | HBuilderX         |

更多关于uni-app VUE3-CLI H5环境下.js文件不会热重载的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你的问题是 web 端 修改了 js 文件，但是没有热更新吗？

更多关于uni-app VUE3-CLI H5环境下.js文件不会热重载的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是的，web没有更新，在安卓端是正常

这是一个典型的 uni-app VUE3 CLI 环境下 H5 热重载配置问题。问题根源在于 H5 环境下对 JS 模块的热更新处理机制与原生 App 不同。

解决方案：

  1. 检查 vite.config.js 配置 在项目根目录的 vite.config.js 中确保已正确配置 HMR：
export default defineConfig({
  server: {
    hmr: true
  },
  plugins: [
    // uni 插件配置
  ]
})

  1. 确认文件监听范围 Vite 默认只监听 src 目录下的文件变更。请确认 utils/common.js 文件位于正确的监听路径内。

  2. 手动触发模块更新 在开发环境下，可以强制刷新当前页面来确保 JS 变更生效：

    if (process.env.NODE_ENV === 'development') {
  window.location.reload()
}

  3. 检查导入方式 尝试使用相对路径的完整写法：

    import { test } from '../../utils/common.js'
回到顶部