[Vite](https://github.com/vitejs/vite): Next generation fronteend tooling. It's fast!

新一代的前端开发打包工具，启动和热更新速度都很快（秒级）。支持 Vue，React，Svelte 等前端框架

最新版本(v5.0) 需要 Node **18+, 20+**

## New project

```
npm create vite@latest
```

## Migrate from Webpack to Vite

- `npm i vite --save-dev`

- `package.json`

 ```
 "scripts": {
 "dev": "vite",
 }
 ```

- Copy `public/index.html` to `./index.html`

- `index.html`, replace `%PUBLIC_URL%/` with `/`, add

 ```html
 <script type="module" src="/src/index.js"></script>
 ```

- `npm run dev`

<a href="https://github.com/vitejs/vite" target="_blank">Vite</a>: Next generation fronteend tooling. It's fast!
新一代的前端开发打包工具，启动和热更新速度都很快（秒级）。支持 Vue，React，Svelte 等前端框架
最新版本(v5.0) 需要 Node 18+, 20+
<h2>New project</h2>
<pre class="language-bash"><code>npm create vite@latest
</code></pre>
<h2>Migrate from Webpack to Vite</h2>
<ul>
<li>
<code>npm i vite --save-dev</code>
</li>
<li>
<code>package.json</code>
<pre class="language-bash"><code>"scripts": {
 "dev": "vite",
}
</code></pre>
</li>
<li>
Copy <code>public/index.html</code> to <code>./index.html</code>
</li>
<li>
<code>index.html</code>, replace <code>%PUBLIC_URL%/</code> with <code>/</code>, add
<pre class="language-html"><code class="language-html">&#x3C;script type="module" src="/src/index.js">&#x3C;/script>
</code></pre>
</li>
<li>
<code>npm run dev</code>
</li>
</ul>

CL's Blogs

Vite 介绍

New project

Migrate from Webpack to Vite