uni-app cli项目编译后h5界面打开空白，控制台报错

开发环境	版本号	项目创建方式
Windows	win10	CLI

产品分类

uniapp/H5

浏览器平台

Chrome
浏览器版本：101.0.4951.54

CLI版本号

v2.0.1-34720220422002

示例代码：

{
  "dependencies": {
    "@dcloudio/uni-app-plus": "^2.0.1-34720220422002",
    "@dcloudio/uni-h5": "^2.0.1-34720220422002",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-i18n": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-360": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-alipay": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-baidu": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-jd": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-kuaishou": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-lark": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-qq": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-toutiao": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-vue": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-weixin": "^2.0.1-34720220422002",
    "@dcloudio/uni-mp-xhs": "^2.0.1-34720220422002",
    "@dcloudio/uni-quickapp-native": "^2.0.1-34720220422002",
    "@dcloudio/uni-quickapp-webview": "^2.0.1-34720220422002",
    "@dcloudio/uni-stat": "^2.0.1-34720220422002",
    "[@vue](/user/vue)/shared": "^3.0.0",
    "core-js": "^3.6.5",
    "flyio": "^0.6.2",
    "regenerator-runtime": "^0.12.1",
    "vue": "^2.6.11",
    "vuex": "^3.2.0"
  },
  "devDependencies": {
    "@babel/runtime": "~7.12.0",
    "@dcloudio/types": "^2.6.7",
    "@dcloudio/uni-automator": "^2.0.1-34720220422002",
    "@dcloudio/uni-cli-i18n": "^2.0.1-34720220422002",
    "@dcloudio/uni-cli-shared": "^2.0.1-34720220422002",
    "@dcloudio/uni-migration": "^2.0.1-34720220422002",
    "@dcloudio/uni-template-compiler": "^2.0.1-34720220422002",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.1-34720220422002",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.1-34720220422002",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.1-34720220422002",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.1-34720220422002",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.1-34720220422002",
    "[@vue](/user/vue)/cli-plugin-babel": "~4.5.17",
    "[@vue](/user/vue)/cli-service": "~4.5.17",
    "babel-plugin-import": "^1.11.0",
    "cross-env": "^7.0.2",
    "jest": "^25.4.0",
    "mini-types": "*",
    "miniprogram-api-typings": "*",
    "postcss-comment": "^2.0.0",
    "sass": "^1.49.8",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

操作步骤：

npm install -g [@vue](/user/vue)/cli[@4](/user/4)
vue create -p dcloudio/uni-preset-vue my-project
选择 hello uni-app 项目
yarn serve

nodeper 1楼•5 天前

可参考该帖子的解决方案

gougou168 2楼•5 天前

当你在使用 uni-app CLI 项目编译为 H5 后，打开页面出现空白，并且控制台报错，可能是由于多种原因导致的。以下是一些常见的原因及解决方法：

1. 路由模式问题

问题描述：uni-app 默认使用 hash 路由模式，但如果你的项目配置了 history 模式，可能导致页面无法正常加载。
解决方法：在 manifest.json 中检查 H5 的路由配置：
```
"h5": {
  "router": {
    "mode": "hash" // 确保是 hash 模式
  }
}
```
如果必须使用 history 模式，确保服务器配置了正确的路由重定向（如 nginx 或 Apache）。

2. 静态资源路径问题

问题描述：打包后的静态资源路径不正确，导致资源加载失败。
解决方法：在 manifest.json 中配置正确的 publicPath：
```
"h5": {
  "publicPath": "./" // 根据实际情况调整
}
```
如果是部署到子目录中，需要根据子目录调整 publicPath，例如：
```
"publicPath": "/sub-directory/"
```

3. 跨域问题

问题描述：在开发环境中，如果请求的接口存在跨域问题，可能导致页面无法正常加载。

解决方法：

在开发环境中配置代理：在 vue.config.js 中添加：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-api-domain.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

如果是在生产环境中，确保服务器配置了正确的 CORS 头。

4. 代码错误或依赖问题

问题描述：代码中存在语法错误、未处理的异常，或者依赖包版本不兼容。
解决方法：
- 检查控制台报错信息，定位问题代码。
- 确保所有依赖包版本兼容，可以尝试删除 node_modules 和 package-lock.json，然后重新安装依赖：
```
rm -rf node_modules package-lock.json
npm install
```

5. 未正确引入组件或插件

问题描述：某些组件或插件未正确引入，导致页面无法渲染。
解决方法：
- 检查是否在 pages.json 中正确配置了页面路由。
- 确保所有需要的组件或插件都已正确引入。

6. 浏览器兼容性问题

问题描述：某些浏览器（如低版本 IE）可能不支持 uni-app 的部分特性。
解决方法：
- 确保目标浏览器支持 ES6+ 语法，或者配置 babel 进行兼容处理。
- 在 manifest.json 中配置 babel 选项：
```
"h5": {
  "babel": {
    "presets": ["@babel/preset-env"]
  }
}
```

7. 缓存问题

问题描述：浏览器缓存可能导致页面无法更新。
解决方法：
- 清除浏览器缓存，或者尝试在无痕模式下打开页面。
- 在打包时添加哈希值以防止缓存：
```
// vue.config.js
module.exports = {
  filenameHashing: true
}
```

8. 其他问题

如果以上方法都无法解决问题，可以尝试以下步骤：
1. 检查 uni-app 的版本是否为最新版本，升级到最新版本：
```
npm update @dcloudio/uni-app @dcloudio/uni-cli-shared
```