设置 VSCode+Vite+Vue3+ts 的断点调试

设置 VSCode+Vite+Vue3+ts 的断点调试

当前，Vite+Vue3+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，是比较流行的前端技术之一。如何在vscode中 调试 Vite+Vue3+ts 的代码呢，今天我们一起来进行配置。

首先，我们先配置ts的调试环境，再来配置Vue3的调试环境

1 TypeScript调试环境

1.1 安装Node.js和ts-node插件

1.1.1 安装Node.js和npm：

安装 Node.js，它会自动安装npm（Node包管理器）。
node.js安装包下载地址：https://nodejs.org/en

• 兼容性注意事项 Vite 需要 Node.js 版本 >= 12.0.0。 我们可以在CMD命令行中通过“node -v”判断确认是否成功安装了Node.js，成功安装显示对应的node版本

C:\Users\Administrator>node -v
v18.19.0

除了从 NPM 仓库中直接安装包，“npm install” 命令还可以从本地或者 git 等其它来源安装依赖项。如果要安装一个 npm 包，只需要在 “npm install” 命令后加上包的名称即可。例如：“npm install express”。
“npm install” 命令还支持通过其他命令行参数来指定依赖包的安装位置、版本、依赖的类型等，例如：

“-g” 参数可以全局安装包，而不是本地安装
“–save” 或者 “-S” 参数将安装的包添加到 package.json 文件的 dependencies 字段中
“–save-dev” 或者 “-D” 参数将安装的包添加到 package.json 文件的 devDependencies 字段中
“–production” 或者 “-P” 参数表示只安装项目的生产依赖
“@latest” 可以用来指定安装最新版本的包

1.1.2 ，安装ts-node插件：

• 全局安装ts-node插件： 全局安装ts-node插件，使用“npm install ts-node -g”命令。

1.1.3 为项目配置 ts-node

我们可以在CMD命令行中通过“ts-node -v”判断确认是否成功安装了ts-node，成功安装显示对应的ts-node版本

C:\Users\Administrator>ts-node -v
v10.9.2

如果未成功配置，我们可以按如下方式进行配置：
右键单击VSCode项目中资源管理器面板的空白区域，选择“在集成终端中打开”。cd 到项目根目录，安装ts-node依赖

• 全局配置ts-node

PS D:\work\lzc\Source\Project\my-vue-app> npm install -g ts-node

• 项目配置ts-node

PS D:\work\lzc\Source\Project\my-vue-app> npm install ts-node --save

1.1.4 为项目配置 TypeScript

在命令行下输入tsc -v确认TypeScript 是否成功配置

C:\Users\Administrator>tsc -v
Version 5.4.5

如果没有成功，我们需要进行配置
在终端窗口输入以下命令：“npm install typescript --save”

配置tsconfig.json文件：

如果是安装配置TypeScript ，此时项目的根目录下并没有这个文件，我们需要在根目录下使用终端执行以下命令来创建一个tsconfig.json文件，如下图所示：

注意：如果执行该命令之后报如下错误，请按照如下方式解决。

输入命令 ：

 Get-ExecutionPolicy

tsconfig.json文件创建好了之后，将文件内容修改为以下内容

{"compilerOptions":{"module":"commonjs",// 生成代码的模板标准"target":"es6",// 目标语言的版本，现在基本都是ES6"noImplicitAny":true,// 不允许隐式的any类型"outDir":"./dist",// 指定输出目录"sourceMap":true// 是否生成目标文件的sourceMap文件},// include下指定编译文件，即目标ts文件所在位置：**表示递归子目录；*表示目录下的所有文件// 示例中我将所有的ts文件都放在了src目录下"include":["src/**/*"]}

1.2 在VsCode中添加配置

在VsCode中点击左侧的调试工具栏=》选择“显示所有自动调试配置” =》点击“添加配置”

如果已经有配置，则直接点击“添加配置”

在下拉列表中选择Node.js，确定后系统会自动生成相应的launch.json配置文件或配置项，有些版本可能需要手动创建。如果手动创建，在项目的根目录下创建“.vscode/launch.json”文件。

对于创建的默认的launch.json文件不能满足我们调试TypeScript代码的需求。我们需要修改launch.json文件为以下内容：

{"version":"0.2.0","configurations":[{"type":"node",// 配置类型，TypeScript是通过node来进行调试"request":"launch",// 请求配置的类型"name":"启动程序",// 配置名称，显示在启动配置下拉菜单中"skipFiles":["<node_internals>/**"],"program":"${workspaceRoot}/node_modules/ts-node/dist/bin.js",// 可执行文件的绝对路径"args":["${relativeFile}"// 传递给程序的命令行参数],"cwd":"${workspaceRoot}",// cd到工程的根目录下 "outFiles":["${workspaceFolder}/**/*.js"]}]}

至此，TypeScript调试的配置流程处理完毕，我们可以使用VsCode进行TypeScript代码调试，下一步我们就来配置Vue的调试配置。

2 Vue的调试配置

2.1 运行npm run dev

PS D:\work\lzc\Source\Project\my-vue-app> npm run dev

> [email protected] dev
> vite

  VITE v5.3.1  ready in 186 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

2.2 安装Chrome

2.3 在launch.json文件中添加一个新的配置荐

在配置荐中，把url改成npm run dev启动时的Local地址

{"name":"Launch Chrome","request":"launch","type":"chrome","url":"http://localhost:5173/",// npm run dev启动时的Local地址"webRoot":"${workspaceFolder}"},

3 调试TS、VUE代码

我们在TS、VUE文件中各打一个断点，点击开始调试按钮，或按F5，开始调试



到这，我们顺利完成 VSCode+Vite+Vue3+ts 的断点调试。