Vite
WebStorm 集成了 Vite 构建工具，从而改善前端开发体验。 Vite 包含一个开发服务器和一个构建命令。 构建服务器通过原生 ES 模块提供源文件服务。 构建命令使用 Rollup 将代码打包，并预配置为生成高度优化的生产环境静态资源。
WebStorm 支持 Vue style 标签中的 tsconfig.json 和 jsconfig.json 路径映射，并识别 Vite 别名。
在包含使用不同 Vite 配置的多个模块的项目中，WebStorm 可自动检测每个模块的相关配置文件，并使用其中的模块解析规则，详见下文 指定要使用的 Vite 配置文件。
开始之前
创建一个新的 Vite 应用
推荐的方式是使用 create-vite 包来启动新的 Vite 应用程序，WebStorm 会使用 npx 下载并运行该包。 因此，您的开发环境将预配置为使用 Vite，并包含一个流行框架的基础模板，例如 React、 Vue.js、 Svelte 等。
当然，您仍然可以手动下载 create-vite ，或者创建一个空的 WebStorm 项目并在其中安装 Vite。
使用 create-vite 生成 Vite 应用
在 欢迎 界面上点击 新建项目 ，或从主菜单中选择 。 将打开 新建 项目 对话框。
在左侧窗格中选择 Vite。
在右侧窗格中：
指定用于存储项目相关文件的文件夹路径。
在 Node 解释器 字段中，指定要使用的 Node.js 解释器。 从列表中选择已配置的解释器，或选择 添加 来配置一个新的解释器。
在 Vite 列表中选择 npx create-vite。
或者，如果使用的是 npm 5.1 或更早版本，请在 终端 Alt+F12 中运行
npm install --g create-vite来手动安装create-vite包。 创建应用程序时，选择存放create-vite包的文件夹。从 模板 列表中选择适用于您应用所用框架的 社区维护的 Vite 模板。
可选：
要使用 TypeScript 而非 JavaScript，请勾选 使用 TypeScript 模板 复选框。 WebStorm 将为您的应用程序生成 .ts 文件以及一个 tsconfig.json 配置文件。
点击 创建 后，WebStorm 会生成一个特定于 Vite 的项目，其中包含所需的配置文件，并下载相关依赖项。 WebStorm 还会创建一个默认设置的 npm dev 配置项，用于运行您的应用程序。
在空的 WebStorm 项目中安装 Vite
在这种情况下，您需要自行配置构建流程。 请参阅 Vite 官方网站 ，了解如何将 Vite 添加到项目中。
创建一个空的 WebStorm 项目
在 欢迎 界面上点击 新建项目 ，或从主菜单中选择 。 将打开 新建 项目 对话框。
在左侧窗格中选择 空的 项目。 在右侧窗格中指定应用程序文件夹并点击 创建。
在空项目中安装 Vite
打开空的 项目，将在其中使用 Vite。
在嵌入式 终端 （Alt+F12 ）中输入：
npm install --save-dev vite
从现有的 Vite 应用开始
要继续开发现有的 Vite 应用程序，请在 WebStorm 中打开它，并下载所需的依赖项。
打开已存在于本地计算机中的应用源代码
在 欢迎 界面上点击 打开 ，或从主菜单中选择 。 在打开的对话框中，选择存放源代码的文件夹。
从版本控制系统签出应用源代码
在 欢迎 界面上点击 克隆存储库克隆。
或者，从主菜单中选择 、 或 。
在主菜单中，您可能会看到与项目关联的其他版本控制系统，而非 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定用于检出应用源代码的代码库。 如需了解更多信息，请参阅 检出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'。
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详细信息请参阅 npm 和 Yarn。
或者，在编辑器或 项目 工具窗口 Alt+1 中，右键点击 package.json ，然后选择 运行 'npm install' 或 运行 'yarn install'。
项目安全性
当您打开在 WebStorm 外部创建并导入到其中的项目时，WebStorm 会显示一个对话框，供您决定如何处理包含未知源代码的此项目。
请选择以下选项之一：
在安全模式中预览 ：在该情况下，WebStorm 将以预览模式打开项目。 这意味着您可以浏览项目源代码，但无法运行任务、脚本或运行／调试项目。
WebStorm 会在编辑器区域上方显示通知，您可以随时点击 信任项目… 链接加载项目。
信任项目 ：在此情况下，WebStorm 会打开并加载项目。 这意味着项目已初始化，项目插件已解析，依赖项已添加，并且所有 WebStorm 功能均可用。
不打开 ：在此情况下，WebStorm 不会打开项目。
详细了解请参见 项目安全性。
在 WebStorm 中配置 Vite
创建 Vite 配置文件
指定要使用的 Vite 配置文件
基于对 Vite 配置文件的分析，WebStorm 能够理解 Vite 配置，解析模块，并在 JavaScript 和 TypeScript 文件中提供代码辅助功能。
在 WebStorm 中，您可以选择两种配置模式：自动和手动。
使用 自动配置 时，WebStorm 会为每个 JavaScript 或 TypeScript 文件自动检测相应的 Vite 配置文件。
使用 手动配置 时，您可以指定项目中要使用的 Vite 配置文件。 如果您 Vite 配置文件的名称未被 WebStorm 识别，可参考下方 受支持的 Vite 配置名称列表 ，此时手动配置将十分有用。
选择如何检测 Vite 配置
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
在 检测用于模块解析的 Vite 配置文件 区域中，选择以下选项之一：
自动： 在此模式下，对于 JavaScript 或 TypeScript 文件，WebStorm 会首先在该文件所在的文件夹中查找 Vite 配置文件，然后依次查找其父文件夹，依此类推。
因此，如果您的项目包含多个具有不同 Vite 配置的模块，每个模块将使用其自身配置文件中的模块解析规则（如果找到该配置文件）。
WebStorm 会按以下顺序识别 JavaScript 或 TypeScript Vite 配置文件名称：
vite.config.js / vite.config.ts
vite.config.mjs
vite.config.cjs
手动： 在 配置文件 字段中，指定要使用的 Vite 配置文件位置。
在此模式下，将对项目中的所有模块应用指定配置文件中的模块解析规则。
如果您的 Vite 配置文件名称未被 WebStorm 识别，请选择此选项，并参考上方 受支持的 Vite 配置名称列表。
运行 Vite 应用
在 package.json 中、
dev脚本旁边的装订区域中单击
，或者在 终端 Alt+F12 中执行 npm run dev命令，或者在 npm 工具窗口 （ ）中双击dev任务。
请等待应用编译完成并且开发服务器就绪。
运行 工具窗口或 终端 中会显示应用运行的 URL。 如果您的应用是使用 create-vue 生成的，默认 URL 为 http://localhost:5173/ 。 点击此链接即可查看应用。
通过运行/调试配置运行 Vite 应用
对于在 WebStorm 新建项目 向导中使用 create-vite 创建的应用，WebStorm 将生成一个默认名称为 npm dev 的 npm 配置。 如上所述 此配置会运行 vite 命令，从而启动开发服务器并以开发模式运行您的应用。
在其他情况下，您需要手动 创建运行/调试配置 ，并填写主机、端口等实际设置。
创建 npm 运行/调试配置
转到 。 或者，您也可以在工具栏上的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 npm。在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 的位置、Node.js 解释器以及要使用的软件包管理器。
在 命令 字段中，从列表中选择 run ，然后在 脚本 列表中选择要运行的脚本。 大多数情况下会使用默认的
dev脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。
可选：
要在浏览器中打开应用，请按如下方式更新配置：在 浏览器／实时编辑 选项卡中，选中 启动后 复选框，选择要用于打开应用的浏览器，并指定应用运行的 URL 地址。
如果要调试应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。
运行应用
在工具栏的列表中选择 npm dev 运行配置，然后点击其旁边的
。
请等待应用编译完成并且开发服务器就绪。
运行 工具窗口或 终端 中会显示应用运行的 URL。 点击此链接即可查看应用。
或者，启用 WebStorm 在启动时打开应用功能， 如上所述。
调试 Vite 应用
您可以通过 启动运行/调试配置或 从“运行”工具窗口开始调试会话，该窗口显示您的应用在开发模式下运行的 URL。
通过运行/调试配置开始调试
要调试 Vite 应用，您需要两个运行/调试配置：
一个 npm 配置用于在开发模式下启动应用， 如上所述。
一个 JavaScript 调试 配置用于将调试器附加到正在开发模式中运行的应用。
您可以在 JavaScript 调试 配置中创建一个 npm 配置，以一次性启动，如 使用 npm 运行/调试配置运行并调试 Vite 应用中所述。
或者，也可以分别创建并启动一个 npm 和一个 JavaScript 调试 运行/调试配置，如 使用 JavaScript Debug 运行/调试配置开始调试中所述。
使用单一 npm 运行/调试配置运行并调试 Vite 应用
在代码中设置 断点。
创建一个 npm 配置， 如上所述。
如果您使用
create-vite生成了应用，WebStorm 已使用默认名称 npm dev 创建了一个 npm 配置。 该配置可在 运行 小部件中以及 运行/调试配置 对话框中使用。
在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 的位置、Node.js 解释器以及要使用的软件包管理器。
在 命令 字段中，从列表中选择 run ，然后在 脚本 列表中选择要运行的脚本。 通常为默认的
dev脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。在 浏览器／实时编辑 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome或其他 基于 Chromium 的浏览器 ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用将要运行的 URL。
单击 运行。
要重新运行配置，请在 运行 小部件的列表中选择它，然后单击其旁边的
。WebStorm 会在开发模式下运行应用，并同时启动调试会话。
当命中第一个断点时，切换到 “调试”工具窗口并照常操作： 单步执行程序、 暂停和恢复程序执行、 在暂停状态下进行检查 ，探索调用栈和变量，设置监视，计算变量值， 查看实际 HTML DOM等。
使用 JavaScript Debug 运行/调试配置开始调试
在代码中设置 断点。
按照 如上所述在开发模式下启动应用，并等待应用编译完成以及开发服务器就绪。
运行 工具窗口或 终端 显示了应用运行的 URL。 复制此 URL，以便稍后在 JavaScript Debug 配置中指定。
创建一个 JavaScript 调试 配置。 为此，请在主菜单中转到 ，点击
，然后从列表中选择 JavaScript 调试。在打开的 运行/调试配置：JavaScript 调试 对话框中，指定配置名称以及应用在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。
单击 调试。
要重新运行配置，请从 运行 小部件列表中选择它，然后单击其旁边的
。
当命中第一个断点时，切换到 “调试”工具窗口并照常操作： 单步执行程序、 暂停和恢复程序执行、 在暂停状态下进行检查 ，探索调用栈和变量，设置监视，计算变量值， 查看实际 HTML DOM等。
从运行工具窗口或内置终端开始调试
如果您的应用正在 localhost 上以开发模式运行，尤其是在使用 create-vite 生成时，您可以直接从 >运行 工具窗口或内置 终端 中启动调试会话。
在代码中设置 断点。
按照 如上所述在开发模式下启动应用，并等待应用编译完成以及开发服务器就绪。
运行 工具窗口或 终端 显示了应用运行的 URL。 按住 Ctrl+Shift 然后点击该 URL 链接。 WebStorm 会使用自动生成的 配置启动一个类型为 JavaScript Debug的调试会话。
如果您是在 新终端中以开发模式启动应用，则只需点击链接旁边的 在浏览器中开始调试 按钮。
当命中第一个断点时，切换到 “调试”工具窗口并照常操作： 单步执行程序、 暂停和恢复程序执行、 在暂停状态下进行检查 ，探索调用栈和变量，设置监视，计算变量值， 查看实际 HTML DOM等。
Node.js 17+ 故障排除
如果您使用的是 Node.js 17 或更高版本，在调试会话过程中可能会遇到网络连接问题，导致调试器附加或加载 sourcemap 出现问题。
解决办法是将 --host 127.0.0.1 传递给服务器。 您可以通过以下几种方式之一实现此操作：
在您的 package.json 中更新
dev脚本："dev": "vite --host=127.0.0.1"或者，将
dns.setDefaultResultOrder('ipv4first')添加到您的 vite.config.ts 。