Vite

1. 从主菜单中选择 文件 | 新建 | 项目 或点击 新建项目 按钮在 欢迎 屏幕。

2. 在 新建项目 对话框中，在左侧窗格中选择 Vite。

3. 在右侧窗格中：

   • 指定项目名称及其创建文件夹。

   • 在 Node 解释器 字段中，指定要使用的 Node.js 解释器。 从列表中选择一个已配置的解释器或选择 添加 来配置一个新的解释器。

   • 从 Vite 列表中选择 npx create-vite。

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

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

   • 可选：

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

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

创建一个空的 IntelliJ IDEA 项目

1. 从主菜单中选择 文件 | 新建 | 项目 或点击 新建项目 按钮在 欢迎 屏幕。

2. 在 新建项目 对话框中，在左侧窗格中选择 新建项目。

3. 在右侧窗格中，选择 JavaScript 在 语言 区域。

4. 如有必要，请为新项目命名并更改其位置，然后点击 创建。

在空项目中安装 Vite

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

2. 在嵌入的 终端 （Alt+F12 ）中输入：

   npm install --save-dev vite

选择如何检测 Vite 配置

1. 打开 设置 对话框(Ctrl+Alt+S )并转到 语言与框架 | JavaScript | Vite。

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

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

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

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

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

     • vite.config.mjs

     • vite.config.cjs

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

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

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

     

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

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

   

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

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

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

   

3. 可选：

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

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

   

运行应用程序

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

   

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

   运行 工具窗口或 终端 显示您的应用程序运行的 URL。 请点击此链接查看应用程序。

   

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

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

1. 在您的代码中设置 断点。

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

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

   

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

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

   

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

   

5. 点击 运行。

   要重新运行配置，请从 运行 控件的列表中选择它，然后点击旁边的 。

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

   

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

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

1. 在您的代码中设置 断点。

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

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

   

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

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

   

5. 点击 调试。

   要重新运行配置，请从 运行 控件的列表中选择它，然后点击旁边的 。

   

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

1. 在您的代码中设置 断点。

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

3. 运行 工具窗口或 终端 显示您的应用程序运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 IntelliJ IDEA 启动一个调试会话，并自动生成 类型为 JavaScript Debug的配置。

   

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