uni-app vscode开发热更新后直接白屏

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app vscode开发热更新后直接白屏

操作步骤：

使用脚手架新建uni-preset-vue#vite项目后，通过npm run dev:app运行，根据提示通过hbuildx导入dist/dev/app运行，修改代码保存后，控制台提示文件刷新成功，但是手机上页面白屏

预期结果：

页面正常刷新

实际结果：

页面白屏

bug描述：

使用脚手架新建项目后，通过npm run dev:app运行，根据提示通过hbuildx导入dist/dev/app运行，修改代码保存后，控制台提示文件刷新成功，但是手机上页面白屏



| 信息类别       | 内容               |
|----------------|--------------------|
| 产品分类       | uniapp/App         |
| PC开发环境     | Mac                |
| PC操作系统版本 | 14.6.1             |
| 手机系统       | Android            |
| 手机系统版本   | Android 12         |
| 手机厂商       | 荣耀               |
| 手机机型       | 荣耀X40i 5G DIO-AN00|
| 页面类型       | vue                |
| vue版本        | vue3               |
| 打包方式       | 离线               |
| 项目创建方式   | CLI                |
| CLI版本号      | 5.0.8              |

Harmonyos Next教程
6 回复

提供 HBuilderX 版本和复现工程。新建 HBuilderX 内置的 hello uniapp 运行到真机是否正常，排除基础环境有问题。之前这样开发是否遇到问题，真机白屏是都白屏还是个别设备白屏，打开真机调试是否有相关提示？提供更多信息，有助于定位和解答你的问题。


HBuilx版本4.29，复现工程为脚手架创建的uni-preset-vue#vite基础项目，通过hbuildx新建项目可以实现正常热更新，目前的问题是开发环境运行时模拟器或手机可以正常显示，修改代码后项目热更新，手机或模拟器白屏，每次修改代码需要通过hbuildx重新启动才可正常显示

运行情况展示如下

更新后情况如下

楼主大大，这个问题解决了吗？

回复 UNIAPP郭: 没

在使用uni-app进行VSCode开发时，遇到热更新后直接白屏的问题，通常可能是由于多种原因导致的，包括但不限于代码错误、资源加载问题、配置错误等。以下是一些可能的解决方案，通过代码示例和配置调整来尝试解决这个问题。

1. 检查manifest.json配置

首先确保manifest.json中的配置正确无误，特别是关于应用的基础路径、页面路径等配置。

{
  "mp-weixin": { // 以微信小程序为例
    "appid": "your-app-id",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
    // 其他页面配置
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

2. 清理缓存和重新安装依赖

有时候，缓存或者依赖问题可能导致热更新失败。尝试清理项目缓存并重新安装依赖。

# 清理npm缓存
npm cache clean --force

# 删除node_modules文件夹和package-lock.json文件
rm -rf node_modules package-lock.json

# 重新安装依赖
npm install

3. 检查条件编译

如果你的项目中使用了条件编译，确保条件编译的代码块没有错误，并且逻辑正确。

// #ifdef H5
console.log('This is H5 platform code');
// #endif

// #ifdef MP-WEIXIN
console.log('This is WeChat Mini Program code');
// #endif

4. 检查生命周期函数

确保页面的生命周期函数中没有导致应用崩溃或白屏的错误代码。

Page({
  onLoad() {
    console.log('Page loaded');
    // 确保这里的代码不会抛出异常
  },
  onReady() {
    console.log('Page ready');
    // 其他初始化代码
  }
  // 其他生命周期函数
});

5. 调试和日志

使用VSCode的调试功能或者uni-app提供的开发者工具进行调试，查看控制台是否有错误信息输出。

# 启动uni-app项目并开启调试模式
npm run dev:%PLATFORM% -- --debug

在开发者工具中查看控制台日志，根据错误信息进一步定位问题。

通过上述步骤，你应该能够定位并解决uni-app在VSCode开发过程中热更新后白屏的问题。如果问题依旧存在，建议详细检查代码逻辑或查阅uni-app官方文档和社区寻求更多帮助。

回到顶部