# @defstudio/vite-livewire-plugin 中文文档

规范地址：https://npmcn.com/package/%40defstudio/vite-livewire-plugin/

版本：3\.0\.7
npm 元数据更新时间：2026-04-27T08:48:10.444Z
中文译文更新时间：2026-11-11T21:08:55.202Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40defstudio/vite-livewire-plugin
原文对照：https://npmcn.com/package/%40defstudio/vite-livewire-plugin/?lang=original
项目主页：https://github.com/defstudio/vite-livewire-plugin
源码仓库：https://github.com/defstudio/vite-livewire-plugin

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：27.7 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：^20\.19\.0 \|\| \>=22\.12\.0
- 运行依赖：2 个
- peer 依赖：vite ^8\.0\.3
- 首次发布：2022-06-30T21:37:39.648Z
- 最新版本发布：2026-04-27T08:48:10.151Z
- 近 30 天下载量：36958（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：61（近 12 个月 1 个）

## 中文简介

Vite 的活线插件

## 安装

```sh
npm install @defstudio/vite-livewire-plugin
```

也可以使用：`pnpm add @defstudio/vite-livewire-plugin`、`yarn add @defstudio/vite-livewire-plugin`、`bun add @defstudio/vite-livewire-plugin`

## README

# Vite 活线插件

[![Total Downloads](https://img.shields.io/npm/dt/@defstudio/vite-livewire-plugin)](https://www.npmjs.com/package/@defstudio/vite-livewire-plugin) [![Latest Stable Version](https://img.shields.io/npm/v/@defstudio/vite-livewire-plugin)](https://www.npmjs.com/package/@defstudio/vite-livewire-plugin) [![License](https://img.shields.io/npm/l/@defstudio/vite-livewire-plugin)](https://www.npmjs.com/package/@defstudio/vite-livewire-plugin) [![Twitter Follow](https://img.shields.io/twitter/follow/FabioIvona?label=Follow&style=social)](https://twitter.com/FabioIvona?ref_src=twsrc%5Etfw)

Vite已经成为Laravel默认的前端构建工具.

此插件( 由 [def: studio (英语)](https://twitter.com/FabioIvona)) 配置用于Livewire设置的Vite,允许组件在刀片或类文件发生变化时热重装而不会失去状态.

可用的演示视频 [下级](https://npmcn.com/package/%40defstudio/vite-livewire-plugin/#readme-demo) 在本页中

## 安装

在安装前,请仔细阅读我们的文件 [https://docs.defstudio.it/vite-livewire-plugin (中文(简体) )](https://docs.defstudio.it/vite-livewire-plugin)

```bash
npm install --save-dev @defstudio/vite-livewire-plugin
```

## 使用量

可以通过添加 : `livewire()` 插件到该插件 `vite.config.js` 文件 :

```javascript
import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

import livewire from '@defstudio/vite-livewire-plugin'; // <-- import

export default defineConfig({
    //...
    
    plugins: [
        laravel([
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: false, // <-- disables laravel autorefresh, to avoid conflicts
        ]),
        
        livewire({  // <-- add livewire plugin
            refresh: ['resources/css/app.css'],  // <-- will refresh css (tailwind ) as well
        }),
    ],
});
```

并在您中添加活线热重装管理器 `app.js` 文件 :

```js
//..

import {livewire_hot_reload} from 'virtual:livewire-hot-reload'

livewire_hot_reload();
```

Vite 服务器启动后, 您应该在浏览器控制台上看到init 消息 :

```
[vite] connecting...
[vite] livewire hot reload ready.
[vite] connected.
```

从现在开始,当一个 `.blade.php` 或活线 `.php` 分类更新, 热重装会触发页面中所有 Livewire 组件的刷新( 以及 app. css 文件 ) :

```
[vite] css hot updated: /resources/css/app.css
[vite] livewire hot updated.
```

> **3⁄4 ̄ ̧漯B** 此 Vite 插件, 由于 Livewire 需要在页面中坚持, 无法完全兼容其它当一个插件时会完整刷新页面的插件 `.blade.php` 文件更改( 即 laravel/ vite- plugin 有刷新选项激活) 为了让他们合作, `blade` 文件在 `**/livewire/**` 叶片热再装入。 对于 Laravel Vite 插件, 此配置可以解决此问题 :

```js
// vite.config.js
export default defineConfig({
//...
    plugins: [
        //...
    
        laravel({
            // ...
            refresh: false,
        })
    ],
});
```

## 用法文档( D)

可在以下网址查阅大量文件:

[https://docs.defstudio.it/vite-livewire-plugin (中文(简体) )](https://docs.defstudio.it/vite-livewire-plugin)

## 更改日志

请看 [变化](https://npmcn.com/package/%40defstudio/vite-livewire-plugin/CHANGELOG.md) 关于最近变化的更多信息. [跟随我们](https://twitter.com/FabioIvona) 更多关于这个软件包的更新.

## 捐款

请看 [捐款](https://npmcn.com/package/%40defstudio/vite-livewire-plugin/.github/CONTRIBUTING.md) 详细情况.

## 安全脆弱性

请审查 [我们的安全政策](https://npmcn.com/package/security/policy) 如何报告安全弱点.

## 贷项

-   [法比奥·伊沃纳](https://github.com/def-studio)
-   [所有贡献者](https://npmcn.com/package/contributors)

## 许可证

麻省理工学院许可证(MIT). 请看 [许可证文件](https://npmcn.com/package/%40defstudio/vite-livewire-plugin/LICENSE.md) 更多信息.

## 演示

[https://user-images.githubusercontent.com/8792274/176996785-d4e21ee5-b9f3-4e91-bf3a-4bbc0e87a148.mp4 请检查isbn=值 (帮助)](https://user-images.githubusercontent.com/8792274/176996785-d4e21ee5-b9f3-4e91-bf3a-4bbc0e87a148.mp4)

## 常见问题

### @defstudio/vite-livewire-plugin 是什么？

Vite 的活线插件

### 如何安装 @defstudio/vite-livewire-plugin？

在项目目录运行 npm install @defstudio/vite-livewire-plugin，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vite（^8\.0\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @defstudio/vite-livewire-plugin 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @defstudio/vite-livewire-plugin 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @defstudio/vite-livewire-plugin 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^20\.19\.0 \|\| \>=22\.12\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @defstudio/vite-livewire-plugin 可以商用吗？

@defstudio/vite-livewire-plugin 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @defstudio/vite-livewire-plugin 的下载量有多少？

根据 npm 官方下载统计，@defstudio/vite-livewire-plugin 在 2026/10/12 – 2026/11/10 这 30 天内被下载 36,958 次，日均约 1,232 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @defstudio/vite-livewire-plugin 还在维护吗？

最新版本 3\.0\.7 发布于 2026/04/27（6 个月前）；至今共发布 61 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/07/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。