vscode open in browser配置默认浏览器

### 配置 Vue 全家桶并使用默认浏览器打开项目 要在 VSCode 中配置 Vue 全家桶并通过默认浏览器打开项目，可以通过以下方式完成： #### 安装依赖 确保已经通过 `npm` 或者 `cnpm` 安装了所有的项目依赖。如果尚未安装，则可以在终端运行以下命令： ```bash npm install ``` 这一步会自动解析并下载所需的依赖项[^1]。 #### 启动开发服务器 启动 Vue 开发服务器通常需要执行以下命令： ```bash npm run serve ``` 该命令会在本地启动一个开发服务器，默认情况下监听端口 `8080` 或其他指定的端口号（具体取决于项目的配置）。启动完成后，终端会显示类似如下的 URL 地址： ``` Local: http://localhost:8080/ Network: http://<your-ip>:8080/ ``` #### 修改 launch.json 文件以支持默认浏览器 为了使项目能够在默认浏览器中自动打开，需调整 `.vscode/launch.json` 文件中的配置。以下是推荐的配置示例： ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Open Default Browser", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "runtimeArgs": ["--new-window"], "sourceMaps": true, "smartStep": true } ] } ``` 此配置指定了当调试模式被触发时，Chrome 浏览器将以新窗口的形式加载指定的 URL 地址[^2]。 需要注意的是，虽然这里的例子是以 Chrome 为例，但如果希望直接调用系统的默认浏览器而非特定浏览器，可以修改启动脚本而不是依赖于 `launch.json`。 #### 调整 package.json 的 scripts 字段 另一种方法是在 `package.json` 文件内的 `scripts` 部分增加一个新的自定义脚本来开启默认浏览器。例如： ```json "scripts": { "serve": "vue-cli-service serve", "open-browser": "start http://localhost:8080" }, ``` 这样就可以先正常启动服务 (`npm run serve`) ，然后再单独运行另一个命令来手动打开浏览器页面(`npm run open-browser`) 。注意对于不同操作系统可能需要替换 `start` 命令为适合的操作系统指令，比如 Linux 下可能是 `xdg-open`, macOS 则是 `open`. #### 自动化流程 (可选) 还可以利用 Node.js 插件或者 shell 脚本来进一步简化操作过程，使得每次启动应用的同时也能立即唤起浏览器访问对应网址。不过这种做法相对复杂一些，初学者建议优先掌握基础步骤后再考虑扩展功能。 --- ### 总结 综上所述，在 VSCode 上配置好 Vue 全家桶后，既可以选择借助内置插件设置固定的调试环境以便快速预览网页效果；也可以通过对原有构建工具链稍作改动达成同样的目的——即让程序自行检测当前所处状态从而决定下一步动作是否应该包含跳转至外部资源链接这一环节[^3]。