uni-app 新版本使用H5编译时，出现报错

信息类型	信息内容
产品分类	HbuilderX
操作系统	Windows
版本号	10
开发工具	HbuilderX
工具版本	3.4.6

bug描述：

运到到H5时出现的报错。切换到上个版本不会报错
报错文本：

06:06:38.139 (node:22824) UnhandledPromiseRejectionWarning: RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received .  
06:06:38.142     at validatePort (internal/validators.js:182:11)  
06:06:38.142     at Server.listen (net.js:1442:5)  
06:06:38.144     at Server.httpServer.listen (D:\文本编辑器\HBuilderX\plugins\uniapp-cli-vite\node_modules\vite\dist\node\chunks\dep-27bc1ab8.js:59223:20)  
06:06:38.145 (node:22824) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)  
06:06:38.148 (node:22824) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

操作步骤：

运到到H5时出现的报错。切换到上个版本不会报错

预期结果：

运到到H5时出现的报错。切换到上个版本不会报错

实际结果：

运到到H5时出现的报错。切换到上个版本不会报错

nodeper 1楼•18 天前

原因找到了，在manifese.json配置文件中，这个选项导致的。问题是。我从来没修改过这个配置文件的源码视图。这个问题，属于兼容性bug。把这行删了就行

bupafengyu 2楼•18 天前

学习了，问题是为什么编辑器会自己更改文件，怪了。。。

eggper 3楼•18 天前

对，这个是编辑器自己弄的，不是我弄的。不过现在的编辑器应该不会自己添加了吧。毕竟这个属性是老编辑器添加的，既然新版本编辑器不兼容这个属性，应该就不会再添加了

itying888 4楼•18 天前

问题确认，已加分，即将修复。

gougou168 5楼•18 天前

HBuilderX 3.4.7+ 已修复

ionicwang 6楼•18 天前

我在3.7.9重新遇到了这个问题，一模一样的触发条件，望尽快修复

wuwangju 7楼•18 天前

回复 2***@qq.com: vue2还是vue3？

sinazl 8楼•18 天前

在使用 uni-app 进行 H5 编译时，如果出现报错，可能是由于多种原因引起的。以下是一些常见的排查步骤和解决方案：

1. 检查 uni-app 版本

确保你使用的 uni-app 版本是最新的，或者至少是稳定的版本。可以通过以下命令更新 uni-app 的依赖：
```
npm update @dcloudio/uni-app
```

2. 检查依赖包

确保所有依赖包都已正确安装，并且版本兼容。可以尝试删除 node_modules 文件夹并重新安装依赖：
```
rm -rf node_modules
npm install
```

3. 检查编译配置

检查 manifest.json 和 pages.json 文件，确保配置正确，特别是 H5 相关的配置。
如果你使用了自定义的 webpack 配置，检查是否有冲突或错误。

4. 查看报错信息

仔细阅读控制台输出的报错信息，通常会有具体的错误提示和堆栈信息，根据这些信息可以定位问题。
如果报错信息不明确，可以尝试在 vue.config.js 中开启 source-map 以便更好地调试：
```
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}
```

5. 检查代码兼容性

确保你的代码在 H5 环境下是兼容的，特别是涉及到浏览器 API 的部分。
如果你使用了某些只在特定平台下可用的 API，确保在 H5 环境下有相应的兼容处理。

6. 清理缓存

有时候缓存可能会导致编译问题，可以尝试清理缓存并重新编译：
```
npm cache clean --force
```

7. 检查插件或组件

如果你使用了第三方插件或组件，确保它们支持 H5 平台，并且版本兼容。
可以尝试逐个禁用插件或组件，看看是否是某个插件或组件引起的报错。

8. 查看官方文档和社区

查看 uni-app 的官方文档，看看是否有关于 H5 编译的更新或已知问题。
在 uni-app 的社区或 GitHub 上搜索是否有类似的问题和解决方案。

9. 调试模式

在 manifest.json 中开启调试模式，可能会提供更多的调试信息：

{
  "h5": {
    "devServer": {
      "open": true,
      "port": 8080,
      "https": false
    }
  }
}