uni-app vue3 cli项目运行至华为HarmonyOS白屏

uni-app vue3 cli项目运行至华为HarmonyOS白屏

### 表格

| 项目       | 信息                               |
|------------|------------------------------------|
| 产品分类   | uniapp/App                         |
| PC开发环境 | Windows                            |
| PC版本号   | win10                              |
| 手机系统   | Android                            |
| 手机版本号 | Android 5.0                        |
| 手机厂商   | 华为                               |
| 手机机型   | 华为Mate 10 Pro                    |
| 页面类型   | vue                                |
| Vue版本    | vue3                               |
| 打包方式   | 云端                               |
| 项目创建方式 | CLI                                |
| CLI版本号  | 3.0.0-alpha-3040320220325006       |

### 示例代码：

官方vue3 cli示例项目


### 操作步骤：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project 拉取官方示例项目、运行至华为手机


### 预期结果：

显示helloword页面


### 实际结果：

白屏


### bug描述：

官方vue3 cli示例项目运行至华为真机、Android模拟器均白屏，ios模拟器正常


更多关于uni-app vue3 cli项目运行至华为HarmonyOS白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

解决了 把HBuilderX-Alpha升级至最新版本运行成功

更多关于uni-app vue3 cli项目运行至华为HarmonyOS白屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app Vue3 CLI 项目中运行到华为 HarmonyOS 设备上出现白屏问题，可能由多种原因导致。以下是一些常见的排查和解决方法：

1. 检查项目配置

  • 确保 manifest.json 文件中的配置正确，尤其是 appid 和 HarmonyOS 相关的配置。
  • 检查 pages.json 中路由配置是否正确，确保首页路径没有问题。

2. 调试白屏原因

  • 使用华为开发者工具或真机调试功能，查看控制台是否有报错信息。
  • 如果有报错信息，根据错误类型进行排查。
  • 如果没有报错信息，可能是资源加载失败或兼容性问题。

3. 检查打包配置

  • 确保 vue.config.js 中的打包配置正确。
  • 检查 publicPath 是否设置为相对路径（./），避免资源路径错误。
    module.exports = {
  publicPath: './'
};

4. 兼容性问题

  • HarmonyOS 可能对某些 JavaScript 或 CSS 特性支持不完全，检查项目中是否有不兼容的语法或特性。
  • 使用 babel 和 postcss 对代码进行兼容性处理。
    • 安装 @babel/preset-env 和 postcss-preset-env。
    • 在 babel.config.js 中添加配置：
      module.exports = {
  presets: ['@vue/cli-plugin-babel/preset', '@babel/preset-env']
};

5. 资源加载问题

  • 确保静态资源（如图片、字体等）路径正确。
  • 如果使用了第三方库或插件，检查其是否支持 HarmonyOS。

6. 真机调试

  • 使用华为开发者工具连接真机，查看运行日志和性能分析。
  • 检查是否有内存溢出或性能问题导致白屏。

7. 更新依赖

  • 确保 uni-app 和相关依赖是最新版本，避免因版本问题导致兼容性问题。
    npm update
回到顶部