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