开始

  • 一个开发服务器，它基于 提供了 丰富的内建功能，如速度快到惊人的 。

  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

你可以在 中了解更多关于项目的设计初衷。

浏览器支持

::: tip 兼容性注意 Vite 需要 版本 >= 12.0.0。 :::

使用 NPM:

使用 Yarn:

    然后按照提示操作即可！

    你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

    1. # npm 6.x
    2. npm init vite@latest my-vue-app --template vue
    4. # npm 7+, 需要额外的双横线：
    5. npm init vite@latest my-vue-app -- --template vue
    7. # yarn
    8. yarn create vite my-vue-app --template vue

    支持的模板预设包括：

    • vanilla
    • vanilla-ts
    • vue
    • vue-ts
    • react-ts
    • preact-ts
    • lit-element
    • lit-element-ts
    • svelte
    • svelte-ts

    查看 create-vite 以获取每个模板的更多细节。

    社区模板

    create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的 社区维护模板，里面包含各种工具和不同框架的模板。你可以用如 之类的工具，使用社区模版来搭建项目。

    如果该项目使用 main 作为默认分支, 需要在项目名后添加 #main。

    1. npx degit user/project#main my-project

    你可能已经注意到，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

    与静态 HTTP 服务器类似，Vite 也有 “根目录” 的概念，即服务文件的位置，在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite 还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。

    Vite 也支持多个 .html 作入口点的 多页面应用模式。

    指定替代根目录

    vite 以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。

    命令行界面

    在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

    可以指定额外的命令行选项，如 --port 或 --https。运行 npx vite --help 获得完整的命令行选项列表。

    如果你迫不及待想要体验最新的功能，可以自行克隆 到本地机器上然后自行将其链接（将需要 Yarn 1.x）：

    1. git clone https://github.com/vitejs/vite.git
    2. cd vite
    3. yarn
    4. cd packages/vite
    5. yarn link

    然后，回到你的 vite 项目并运行 。重新启动开发服务器（yarn dev）来体验新功能吧！

    社区