# Vite

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript` ,  `Vite`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。

IntelliJ IDEA 与 [Vite](https://vitejs.dev/) 构建工具集成，这提高了前端开发体验。 Vite 由开发服务器和构建命令组成。 开发服务器通过原生 ES 模块提供源文件。 构建命令将使用 Rollup 打包您的代码，经过预配置以输出高度优化的生产静态资源。

IntelliJ IDEA 支持  `tsconfig.json`  和  `jsconfig.json`  路径映射在 Vue  `样式`  标签中，识别 [Vite aliases](https://vitejs.dev/config/#resolve-alias)。

在包含多个具有不同 Vite 配置的模块的项目中，IntelliJ IDEA 可以自动检测每个模块的相关配置文件并使用该配置文件中的模块解析规则，请参阅下文的 [指定要使用的 Vite 配置文件](#specify_vite_configuration_file_auto_detection)。

> **Note:**
> IntelliJ IDEA 与 Vite 集成要求在项目中或全局安装  `vite`  软件包。 因此， [使用 create-vite 创建应用程序](#create_new_vite_app)或 [手动安装 vite 软件包](#install_vite_in_empty_project)。 [要使用现有的 Vite 应用](#starting_with_existing_vite_application)，在运行  `npm install`  之前，确保您的  `package.json`  列出了 Vite。

## 开始之前

Procedure:

1. 下载并安装 [Node.js](http://nodejs.org/#download)。

2. 请确保  JavaScript 和 TypeScript  及  Vite  所需插件已在   设置 | 插件   页面上启用。 有关更多信息，请参阅 [管理插件](managing-plugins.html)。

## 创建一个新的 Vite 应用程序

推荐开始一个新的 Vite 应用程序的方式是使用 [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite) 软件包，IntelliJ IDEA 使用 [npx](https://www.npmjs.com/package/npx) 为您下载并运行。 因此，开发环境会预先配置为使用 Vite，以及一个流行框架的基本模板，例如 [React](react.html)、 [Vue.js](vue-js.html)、 [Svelte](null) 等。

当然，您仍然可以自己下载  `create-vite` 或创建一个空的 IntelliJ IDEA 项目并在其中安装 Vite。

> **Tip:**
> 您可以从 [Vite.js 官方网站](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)了解更多关于如何开始使用 Vite 的信息。

### 使用 create-vite 生成 Vite 应用程序

Procedure:

1. 从主菜单中选择  `文件 | 新建 | 项目` ，或者在   %instance% 主页   屏幕上点击  `新建 | 项目` 。

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

3. 在右侧窗格中：

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

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

* 从 Vite 列表中选择 npx create-vite 。 或者，对于 npm 版本 5.1 及更早版本，请在 终端 `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中运行 `npm install --g create-vite` ，自行安装 `create-vite` 包。 创建应用程序时，选择存储 `create-vite` 包的文件夹。

* 从 模板 列表中，选择适用于您将要在应用程序中使用的框架的 [community maintained Vite template](https://github.com/vitejs/awesome-vite#templates)。

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

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

> **Tip:**
> 或者，打开内置的   终端   并输入：
>
>
>
> 1.   `npx create-vite <application-name>`  以创建应用程序。
>
> 2.   `cd <application-name>`  切换到应用程序文件夹。
>
> 3.   `npm start`  以启动 Node.js 服务器。

### 在空的 IntelliJ IDEA 项目中安装 Vite

在这种情况下，需要自行配置构建流水线。 有关将 Vite 添加到项目的更多信息，请参阅 [Vite 官方网站](https://vitejs.dev/guide/)。

Procedure: 创建一个空的 IntelliJ IDEA 项目

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

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

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

4. 为新项目设置名称，并在必要时更改其位置，然后点击   创建  。

Procedure: 在空项目中安装 Vite

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

2. 在命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入：

`npm install --save-dev vite`

## 从现有的 Vite 应用程序开始

若要继续开发现有的 Vite 应用，请在 IntelliJ IDEA 中打开，并下载所需的依赖项。

Procedure: 打开本机上已有的应用程序源代码

* 点击   打开或导入   屏幕上的   欢迎   或从主菜单中选择  `文件 | 打开` 。 在打开的对话框中，选择存储源文件的文件夹。

Procedure: 从版本控制系统检出应用程序源代码

1. 在   欢迎   屏幕上点击   克隆存储库  。

或者，从主菜单中选择  `文件 | 新建 | 从版本控制创建项目…` 、  `Git | 克隆…`  或  `VCS | 从版本控制获取` 。

在主菜单中，可能会看到与项目关联的其他任何版本控制系统，而不是   Git  。 例如，   Mercurial   或   Perforce  。

2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。

Procedure: 下载依赖项

* 在弹出窗口中点击   运行 'npm install'   或   运行 'yarn install'  ：

![打开应用程序并下载依赖项](https://resources.jetbrains.com/help/img/idea/2026.3/ws_npm_yarn_package_run_npm_install.png)

您可以使用 [npm](https://docs.npmjs.com/)、 [Yarn 1](https://classic.yarnpkg.com/lang/en/) 或 [Yarn 2](https://yarnpkg.com/)，详情请参阅 [npm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)。

* 或者，在编辑器中或在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，从  `package.json`  的上下文菜单中选择   运行 'npm install'   或   运行 'yarn install'  。

> **Note:**
> 确保您的  `package.json` 在  `dependencies` 或  `devDependencies` 下列出了  `vite` 包。 这是必要的，因为 IntelliJ IDEA 与 Vite 的集成，特别是自动检测配置文件，需要在您的项目或全局安装  `vite` 软件包。

### 项目安全

打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，可在其中决定如何处理此包含不熟悉源代码的项目。

请选择以下选项之一：

* 在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试项目。 IntelliJ IDEA 会在编辑器区域顶部显示一条通知，可以点击 信任项目… 链接随时加载项目。

* 信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能都可用。

* 不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。

有关更多信息，请参阅 [项目安全](project-security.html)。

> **Tip:**
> 从欢迎屏幕或通过  `文件 | 新建 | 项目`  创建的项目会被自动视为受信任。

## 在 IntelliJ IDEA 中配置 Vite

Procedure: 创建 Vite 配置文件

* 根据项目结构创建一个或多个配置文件：在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中选择父文件夹，然后从上下文菜单中选择  `新建 | JavaScript 文件` 。

![创建 Vite 配置文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vite_create_config.png)

可接受的名称是  `vite.config.js` /  `vite.config.ts` 、  `vite.config.mjs` 或  `vite.config.cjs` 。

您可以从 [Vite 官方网站](https://vitejs.dev/config/)了解更多信息。

* 如果必要，请使用  `alias` ，该代码将在  `import` 语句中被识别。 确保在定义别名时指定绝对路径。 了解更多信息，请访问 [Vite 官方网站](https://vitejs.dev/config/shared-options.html#resolve-alias)。

![在 import 语句中完成 alias](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vite_alias_completion.animated.gif)

### 指定要使用的 Vite 配置文件

基于对 Vite 配置文件的分析，IntelliJ IDEA 理解 Vite 配置，解析模块，并在 JavaScript 和 TypeScript 文件中提供编码帮助。

在 IntelliJ IDEA 中，您可以选择两种配置模式——自动和手动。

通过 [自动配置](#specify_vite_configuration_file_auto_detection_procedure)，IntelliJ IDEA 会自动检测每个 JavaScript 或 TypeScript 文件的相关 Vite 配置文件。

您可以通过 [手动配置](#specify_vite_configuration_file_manual)指定项目中要使用的 Vite 配置文件。 如果您的 Vite 配置文件名未被 IntelliJ IDEA 识别，手动配置是有用的，请参阅下方的 [已识别 Vite 配置名称列表](#specify_vite_configuration_recognized_names)。

Procedure: 选择如何检测 Vite 配置

1. 打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到  `语言与框架 | 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 配置名称列表](#specify_vite_configuration_recognized_names)。 ![请手动选择 vite 配置文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vite_select_config.png)

## 运行 Vite 应用

Procedure:

1. 点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)（位于  `dev`  脚本旁的装订区域，该脚本在  `package.json`  中），或者执行  `npm run dev`  命令（在   终端   `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中），或者双击  `dev`  任务（在 [npm 工具窗口](npm-tool-window.html)（  `查看 | 工具窗口 | npm` ）中）。

![从 package.json 在开发模式下运行 Vite 应用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vite_run_dev_mode_package_json.animated.gif)

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

运行   工具窗口或   终端   会显示应用程序正在运行的 URL。 如果应用程序是使用 create-vue 生成的，则默认 URL 为  `http://localhost:5173/` 。 点击此链接查看应用程序。

![Vue.js 应用正在以开发模式运行](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_run_app_url.png)

### 通过运行/调试配置运行 Vite 应用程序

对于使用  `create-vite` 在IntelliJ IDEA   新建项目  向导中 [如上所述](#creating_vite_app_with_create_vite)创建的应用程序，IntelliJ IDEA会生成一个默认名称为   npm dev  的 [npm](run-debug-configuration-npm.html)配置。 此配置会运行  `vite`  命令，该命令将启动开发服务器并以开发模式启动应用程序。

在其他情况下，需要手动 [创建运行/调试配置](#vite_running_and_debugging_run_via_rc_create_rc)并指定实际设置，例如主机、端口等。

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

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

![打开编辑配置对话框](https://resources.jetbrains.com/help/img/idea/2026.3/vite_run_config_create.png)

在打开的   编辑配置  对话框中，点击工具栏上的   添加  按钮（ !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)），然后从列表中选择   npm  。

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

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

![npm 运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/vite_debug_npm_rc.png)

3. 可选：

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

如果要调试应用程序，请选择 [Google Chrome](http://www.google.com/chrome/) 或其他 [基于 Chromium 的浏览器](https://www.chromium.org/)。

![Browser / Live Edit 选项卡：选择浏览器](https://resources.jetbrains.com/help/img/idea/2026.3/vite_run_rc_browser_tab_select_browser.png)

Procedure: 运行应用程序

1. 从工具栏上的列表中选择   npm dev   运行配置，然后点击其旁边的 ![运行](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.execute.svg)。

![通过运行/调试配置在开发模式下运行 Vite 应用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vite_run_dev_mode.png)

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

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

![正在运行 Vite 应用：开发服务器已准备就绪](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vite_run_dev_server_ready.png)

或者，启用 IntelliJ IDEA 以在启动时打开应用程序 [如上所述](#ws_vite_start_app_in_dev_mode_enable_opening_browser)。

> **Note:**
> 当开发服务器正在运行时，您的应用程序会在您更改任意源文件并保存更新后自动重新加载。

## 调试 Vite 应用程序

> **Note:**
> 仅支持在 [Google Chrome](http://www.google.com/chrome/)和其他 [基于 Chromium 的浏览器](https://www.chromium.org/)中调试 Vite 应用程序。

您可以通过 [启动运行/调试配置](#vite_debug_with_rc)或 [从运行工具窗口](#vite_debug_from_tw)，该窗口显示您的应用程序在开发模式下运行的 URL，开始调试会话。

### 通过运行/调试配置开始调试

要调试 Vite 应用程序，需要两个运行/调试配置：

* 在开发模式下启动应用程序的 npm 配置， [如上所述](#vite_run)。

* 用于将调试器附加到以开发模式运行的应用程序的 JavaScript Debug 配置。

您可以在   JavaScript Debug   配置中创建   npm   配置，以便按照 [使用 npm run/debug 配置运行和调试 Vite 应用程序](#vite_debug_two_rc) 中所述一起启动它们。

或者，分别创建并启动   npm   和   JavaScript Debug   运行/调试配置，如 [使用 JavaScript Debug 运行/调试配置开始调试](#vite_debug_via_js_debug_rc) 中所述。

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

1. 在代码中设置 [断点](using-breakpoints.html)。

2. 创建   npm   配置， [如上所述](#vite_running_and_debugging_run_via_rc_create_rc)。

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

![自动生成的 npm run/debug 配置](https://resources.jetbrains.com/help/img/idea/2026.3/vite_debug_autogenerated_npm_rc.png)

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

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

![npm 运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/vite_debug_npm_rc.png)

4. 在   浏览器 / Live Edit   选项卡中，选中   在启动后   复选框，从列表中选择 [Google Chrome](http://www.google.com/chrome/) 或其他 [Chromium-based browser](https://www.chromium.org/)，选中   使用 JavaScript 调试器   复选框，然后指定您的应用程序将运行的 URL。

![Browser / Live Edit 选项卡：选择浏览器](https://resources.jetbrains.com/help/img/idea/2026.3/vite_run_rc_browser_tab_select_browser.png)

5. 点击   运行  。

要重新运行该配置，请从   运行   微件中的列表中选择它，然后点击其旁边的 ![运行](https://resources.jetbrains.com/help/img/idea/2026.3/app.actions.execute.svg)。

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

![调试会话](https://resources.jetbrains.com/help/img/idea/2026.3/vite_debug_npm_rc_debugging_session.png)

6. 当第一个断点被触发时，切换到 [调试工具窗口](debug-tool-window.html)并按常规操作： [逐步执行程序](stepping-through-the-program.html)， [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行， [在挂起时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html)，等等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

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

1. 在代码中设置 [断点](using-breakpoints.html)。

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

运行   工具窗口或   终端   会显示应用程序正在运行的 URL。 请复制此 URL 到 [稍后在 JavaScript Debug 配置中指定](#vite_debug_specify_URL)。

![应用程序正在以开发模式运行](https://resources.jetbrains.com/help/img/idea/2026.3/vite_debug_app_running_in_dev_mode.png)

3. 创建一个   JavaScript Debug  配置。 要执行此操作，请在主菜单中转到  `运行 | 编辑配置` ，点击 !["添加"图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)，然后从列表中选择   JavaScript 调试  。

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

![创建一个 JavaScript 调试配置：指定 URL](https://resources.jetbrains.com/help/img/idea/2026.3/vite_debug_create_js_debug_rc.png)

5. 点击   调试  。

要重新运行该配置，请从   运行   微件中的列表中选择它，然后点击其旁边的 ![调试](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。

![从运行小部件运行 JavaScript Debug 配置](https://resources.jetbrains.com/help/img/idea/2026.3/vite_debug_rerun_js_debug_rc.png)

6. 当第一个断点被触发时，切换到 [调试工具窗口](debug-tool-window.html)并按常规操作： [逐步执行程序](stepping-through-the-program.html)， [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行， [在挂起时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html)，等等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

### 从 Run 工具窗口或内置 Terminal 开始调试

如果应用程序在  `本地主机`  上以开发模式运行，尤其是使用  `create-vite`  生成的应用程序，可以直接从   >运行   工具窗口或内置   终端   启动调试会话。

Procedure:

1. 在代码中设置 [断点](using-breakpoints.html)。

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

3. 运行   工具窗口或   终端   会显示应用程序正在运行的 URL。 按住 `Ctrl+Shift` (Windows), `Ctrl+Shift` (macOS), `Ctrl+Shift` (IntelliJ IDEA Classic (macOS)), `Ctrl+Shift` (macOS System Shortcuts), `Ctrl+Shift` (XWin), `Ctrl+Shift` (GNOME), `Ctrl+Shift` (KDE), `Ctrl+Shift` (Emacs), `Ctrl+Shift` (Sublime Text), `Ctrl+Shift` (Sublime Text (macOS)), `Ctrl+Shift` (Visual Studio), `Ctrl+Shift` (Visual Studio (macOS)), `Ctrl+Shift` (NetBeans), `Ctrl+Shift` (Eclipse), `Ctrl+Shift` (Eclipse (macOS)) 并点击此 URL 链接。 IntelliJ IDEA 将使用自动生成的    配置启动调试会话，该配置的类型为 [JavaScript Debug](run-debug-configuration-javascript-debug.html)。

![从运行工具窗口启动调试会话，应用程序正在 localhost 上运行](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vite_debug_from_tw_localhost_custom_port.animated.gif)

如果从 [新终端](terminal-emulator.html) 以开发模式启动了应用程序，只需点击链接旁边的   在浏览器中启动调试   按钮即可。

![新终端：在浏览器中开始调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vite_start_debugging_from_new_terminal_start_debugging_button.png)

默认情况下，不显示该按钮。 要显示该按钮，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `高级设置` ，然后在   JavaScript 和 TypeScript   区域选择   在终端中为本地主机链接显示“在浏览器中开始调试”按钮   复选框。

> **Note:**
> 该按钮在 WSL 中的   新终端   不可用。

当第一个断点被触发时，切换到 [调试工具窗口](debug-tool-window.html)并按常规操作： [逐步执行程序](stepping-through-the-program.html)， [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行， [在挂起时检查程序](examining-suspended-program.html)，探索调用堆栈和变量，设置监视，评估变量， [查看实际的 HTML DOM](viewing-actual-html-dom.html)，等等。

要忽略源代码映射并逐步执行实际运行的代码，请在   调试  工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。

### 针对 Node.js 17+ 的故障排除

如果您使用的是 Node.js 版本 17 或更高版本，在调试过程中，您可能会遇到网络连接问题，这会导致调试器附加或者加载 sourcemaps 时出现问题。

解决方法是将  `--host 127.0.0.1`  传递给服务器。 您可以通过以下方式之一来实现：

* 在您的 `dev` 脚本中更新 `package.json` ： ```JSON "dev": "vite --host=127.0.0.1" ```

* 或者，添加 `dns.setDefaultResultOrder('ipv4first')` 到您的 `vite.config.ts` 。