uni-app - 修改默认端口，H5 项目控制台运行出来的 IP 地址的默认端口号（H5 项目运行后控制台，修改项目运行到内置浏览器默认 8080 端口号）

<think>好的，我现在需要帮助用户解决如何在VSCode中配置和调试uni-app项目的问题。首先，我得回顾用户提供的引用内容，看看是否有相关的信息。 根据引用[2]，提到在VSCode中搭建uni-app项目后，可以通过不同的npm命令启动各个端，比如微信小程序使用`npm run dev:mp-weixin`。但用户的问题是关于调试的，而引用中没有直接提到调试配置。引用[3]提到安装uni-helper插件和TS类型支持，这可能与开发环境配置有关，但调试部分可能还需要其他步骤。 接下来，我应该考虑uni-app在VSCode中的调试通常涉及哪些方面。可能包括H5端的浏览器调试、小程序的开发者工具调试，以及App端的真机调试。H5端可以直接用浏览器的开发者工具，但可能需要配置source map。小程序需要生成特定平台的代码，然后用对应的开发者工具打开并调试。App端可能需要使用HBuilderX，但用户希望用VSCode，所以可能需要其他方法。 另外，用户可能需要配置VSCode的调试器，比如通过launch.json设置调试配置。例如，使用Chrome调试H5端，或者使用小程序开发者工具的自动预览功能。同时，可能需要安装相关插件来辅助调试，比如Debugger for Chrome。 还需要注意，uni-app项目在VSCode中的调试可能因平台而异。比如微信小程序需要依赖微信开发者工具，而H5可以直接在浏览器中调试。因此，回答中需要分步骤说明不同平台的调试方法，并确保配置正确。 此外，用户可能遇到常见问题，比如路径配置错误、插件未正确安装，或者npm脚本无法正常运行。需要提醒用户检查这些方面，并提供解决办法，比如重新安装依赖或检查launch.json配置。 最后，确保回答结构清晰，分步骤指导，引用相关引用内容作为支持，并生成相关问题供用户进一步参考。</think>在 VSCode 中配置和调试 uni-app 项目的完整流程如下： ### 一、基础配置 1. **安装必要插件**（参考引用[3]） - `uni-create-view`：快速创建页面组件 - `uni-helper`：提供代码提示和语法支持 - `uniapp小程序扩展`：悬停查看文档 - `Debugger for Chrome`：浏览器调试必备 2. **TS类型支持**（引用[3]） ```bash pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types ``` 修改 `tsconfig.json` 添加类型声明路径： ```json { "compilerOptions": { "types": ["@uni-helper/uni-app-types"] } } ``` ### 二、调试配置 #### 方案1：H5端调试 1. **启动项目** ```bash npm run dev:h5 ``` 2. **配置VSCode调试器** 创建 `.vscode/launch.json`： ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "调试H5端", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src" } ] } ``` 3. 按 `F5` 启动调试（自动打开带sourcemap的浏览器） #### 方案2：微信小程序调试 1. **生成小程序代码** ```bash npm run dev:mp-weixin ``` 2. **用微信开发者工具打开** - 打开生成的 `dist/dev/mp-weixin` 目录 - 开启工具的「自动保存时重新编译」（引用[2]） 3. **VSCode断点调试** ```json { "type": "node", "request": "launch", "name": "微信小程序编译监听", "program": "${workspaceFolder}/node_modules/@dcloudio/vue-cli-plugin-uni/commands/build.js", "args": ["--platform", "mp-weixin"] } ``` #### 方案3：App端调试（需配合HBuilderX） 1. **生成调试包** ```bash npm run build:app-plus ``` 2. 在HBuilderX中导入项目 3. 使用「真机运行」功能调试（引用[2]） ### 三、调试技巧 1. **控制台输出过滤** ```javascript // 开发环境专用日志 if (process.env.NODE_ENV === 'development') { console.log('[DEBUG]', variable) } ``` 2. **条件断点** 在VSCode编辑器中右键设置断点时，可配置表达式触发条件 3. **网络请求捕获** H5端使用浏览器开发者工具 > Network 小程序端使用微信开发者工具 > Network ### 常见问题排查 1. **TS类型报错** - 检查是否安装 `@uni-helper/uni-app-types` - 确认 `uni.d.ts` 文件是否自动生成 2. **无法热更新** ```bash # 清除缓存后重启 rm -rf node_modules/.vite ``` 3. **小程序白屏** - 检查 `manifest.json` 中微信AppID配置 - 确认微信开发者工具 > 设置 > 安全设置已开启服务端口 [^1][^2][^3]