Vite

1. 从主菜单中点击 文件 | 新建 | 项目。 或者，在欢迎屏幕上，点击 新建 | 项目。

2. 在左侧窗格中，选择 Vite。

3. 在右侧窗格中：

   1. 指定将存储项目相关文件的文件夹路径。

   2. 在 Node.js 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择 添加 以配置新的运行时。

   3. 请从 Vite 列表中选择 npx create-vite。

      或者，对于 npm 版本 5.1 及更早版本，请在 终端 Alt+F12 中运行 npm install --g create-vite ，自行安装 create-vite 包。 创建应用程序时，选择存储 create-vite 包的文件夹。

   4. 从 模板 列表中，选择适用于您将要在应用程序中使用的框架的 community maintained Vite template。

   5. 可选：

      若要使用 TypeScript 而非 JavaScript，请选中 使用 TypeScript 模板 复选框。 GoLand 将为您的应用生成 .ts 文件以及一个 tsconfig.json 配置文件。

4. 当您点击 创建 时，GoLand 会生成一个 Vite 特定项目，包括所有必需的配置文件并下载所需的依赖项。 GoLand 还会创建一个 npm dev 配置，使用默认设置运行您的应用程序。

创建一个空的 GoLand 项目

1. 从主菜单中点击 文件 | 新建 | 项目。 或者，在欢迎屏幕上，点击 新建 | 项目。

2. 在左侧窗格中，选择 空 项目。 在右侧窗格中，指定应用程序文件夹并点击 创建。

在空项目中安装 Vite

1. 打开空的 项目，在这里您将使用 Vite。

2. 在内置的 终端 （Alt+F12 ）中，输入：

   npm install --save-dev vite

选择如何检测 Vite 配置

1. 打开 设置 对话框（Ctrl+Alt+S ），然后转到 语言与框架 | JavaScript | Vite。

2. 在 检测 Vite 配置文件以进行模块解析 区域，选择以下选项之一：

   • 自动： 在这种模式下，对于 JavaScript 或 TypeScript 文件，GoLand 将首先在此 JavaScript 或 TypeScript 文件所在的文件夹中查找 Vite 配置文件，然后在其父文件夹中查找，以此类推。

     因此，如果您的项目包含多个具有不同 Vite 配置的模块，每个模块将使用其自己的 Vite 配置文件中的模块解析规则（如果找到此类配置）。

     GoLand 能识别以下名称及顺序的 JavaScript 或 TypeScript Vite 配置文件：

     • vite.config.js / vite.config.ts

     • vite.config.mjs

     • vite.config.cjs

   • 手动： 在 配置文件 字段中，指定要使用的 Vite 配置的位置。

     在这种模式下，指定配置文件中的解析规则将应用于项目中的所有模块。

     如果您的 Vite 配置文件名称未被 GoLand 识别，请参阅上面的 已识别的 Vite 配置名称列表。

创建一个 npm 运行/调试配置

1. 转到 运行 | 编辑配置。 或者，在工具栏上的 运行 小部件中选择 编辑配置。

   

   在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（ ），然后从列表中选择 npm。

2. 在打开的 配置 对话框的 运行/调试 配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。

   在 命令 字段中，从列表中选择 运行 ，然后在 脚本 列表中选择要运行的脚本。 它很可能是默认的 dev 脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。

   

3. 可选：

   要在浏览器中打开应用程序，请按照以下步骤更新配置：在 Browser / Live Edit 选项卡中，选中 启动后 复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。

   如果您打算调试该应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。

   

运行应用程序

1. 在工具栏的列表中选择 npm dev 运行配置，并点击其旁边的 。

   

2. 请等待应用编译完成且开发服务器就绪。

   在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 点击此链接以查看应用。

   或者，启用 GoLand 以在启动时打开应用程序 如上所述。

使用单个 npm run/debug 配置运行和调试 Vite 应用程序

1. 在代码中设置 断点。

2. 创建一个 npm 配置， 如上所述。

   如果您使用 create-vite 生成了应用程序，GoLand 已经使用默认名称 npm dev 创建了一个 npm 配置。 此配置可通过 运行 小部件或 运行/调试配置 对话框获得。

   

3. 在打开的 配置 对话框的 运行/调试 配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。

   在 命令 字段中，从列表中选择 run ，然后在 脚本 列表中选择要运行的脚本。 它很可能是默认的 dev 脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。

   

4. 在 Browser / Live Edit 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 Chromium-based browser ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用程序将运行的 URL。

   

5. 单击 运行。

   要重新运行该配置，请在 运行 小部件的列表中选择它，并点击其旁边的 。

   GoLand 在开发模式下运行应用程序，同时启动调试会话。

   

6. 当第一个断点被触发时，切换到 调试工具窗口 并像往常一样继续： 逐步执行程序、 停止和恢复程序执行、 在暂停时检查 、探索调用堆栈和变量、设置监视、评估变量、 查看实际的 HTML DOM 等。

使用 JavaScript Debug 运行/调试配置开始调试

1. 在代码中设置 断点。

2. 启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。

   在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 请复制此 URL 到 稍后在 JavaScript Debug 配置中指定。

   

3. 创建一个 JavaScript 调试 配置。 要执行此操作，请在主菜单中转到 运行 | 编辑配置 ，点击 ，然后从列表中选择 JavaScript 调试。

4. 在打开的 运行/调试配置：JavaScript Debug 对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。

   

5. 单击 调试。

   要重新运行该配置，请在 运行 小部件的列表中选择它，并点击其旁边的 。

   

6. 当第一个断点被触发时，切换到 调试工具窗口 并像往常一样继续： 逐步执行程序、 停止和恢复程序执行、 在暂停时检查 、探索调用堆栈和变量、设置监视、评估变量、 查看实际的 HTML DOM 等。

1. 在代码中设置 断点。

2. 启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。

3. 在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 GoLand 将使用自动生成的类型为 JavaScript 调试 的 配置启动调试会话。

   

   如果您从 New Terminal 以开发模式启动了应用程序，您只需点击链接旁边的 在浏览器中启动调试 按钮即可。