企业官网建设流程全解析

Vite 如何在已有项目中手动安装并启动开发服务器？

【免费下载链接】viteNext generation frontend tooling. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite

如果你的项目不是用create-vite脚手架创建的，但希望接入 Vite 作为开发服务器，那么不需要重新初始化项目：只需在现有项目里安装vite依赖，准备一个index.html入口，然后运行对应的 CLI 命令即可。完成本文步骤后，你的index.html会被服务在http://localhost:5173。

文档中的兼容性说明指出：Vite 要求 Node.js 版本 20.19+、22.12+；如果包管理器提示某些模板需要更高版本，请按提示升级。

在已有项目中安装 vite

在现有项目根目录中，按你使用的包管理器安装vite为开发依赖：

npm install -D vite

yarn add -D vite

pnpm add -D vite

bun add -D vite

deno add -D npm:vite

-D表示安装到devDependencies，Vite 作为开发期工具不需要随生产代码一起发布。

准备 index.html 入口

Vite 与一些构建工具不同：index.html放在项目根目录，而不是public里，并且它是应用的入口。开发时 Vite 是一个服务器，会把index.html当作源码处理——它会解析<script type="module" src="...">引用的 JS 源码，内联的<script type="module">以及通过<link href>引用的 CSS 也都能享受 Vite 的特性。

最小示例（来自官方文档）：

<p>Hello Vite!</p>

如果页面有 JS 逻辑，按上面的规则在index.html中用<script type="module" src="...">引入你的源文件即可。另外，index.html中的 URL 会自动基于项目根目录（root）重新定位，不需要额外的占位符变量。

启动开发服务器

在项目根目录的终端中运行对应包管理器的命令：

npx vite

yarn vite

pnpm vite

bunx vite

deno run -A npm:vite

vite使用当前工作目录作为 root 启动 dev server，vite dev和vite serve是vite的别名。如果入口不就在当前目录，也可以用vite serve some/sub/dir指定另一个 root——注意 Vite 会按项目 root 查找配置文件（即vite.config.js），root 变了之后配置文件也要放在新的 root 里。

启动完成后，index.html会在http://localhost:5173提供服务，浏览器访问该地址看到文档示例中的Hello Vite!内容，即说明服务器启动成功。

常用启动参数

需要调整端口、自动打开浏览器或指定配置文件时，可以在命令后加参数。完整列表可用npx vite --help在项目内查看（见 CLI 文档）：

在已安装 Vite 的项目里，也可以像脚手架项目的package.json那样把命令写进 npm scripts，官方文档给出的默认脚本形式是：

{ "scripts": { "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve` "build": "vite build", // build for production "preview": "vite preview" // locally preview production build } }

可选：添加配置文件

Vite 会自动在 project root 中查找名为vite.config.js的配置文件（也支持其他 JS 和 TS 扩展名）。最基本的配置形如：

export default { // config options }

文档提醒：要在配置文件中使用 ES modules 语法，该文件必须被 Node.js 识别为 ESM，例如.mjs，或者最近一级package.json里声明了"type": "module"。如果已有项目不是 ESM，可以用vite.config.mjs命名。

已有自定义配置文件时，也可以用vite --config my-config.js显式指定（相对cwd解析）。更多配置写法见 Configuring Vite。

边界说明

• 开发环境下 Vite 假设浏览器是支持最新 JavaScript 和 CSS 特性的现代浏览器，并据此设置转换目标；老旧浏览器的支持属于生产构建侧的@vitejs/plugin-legacy话题，不在开发服务器启动范围内。
• vite preview只用于本地预览生产构建结果，文档明确说明它不是为生产服务器设计的。

开发流程跑通之后，文档给出的下一步是生产构建：vite build用于为生产环境打包，vite preview用于本地预览构建产物，细节见 Getting Started 与 CLI 文档。

【免费下载链接】viteNext generation frontend tooling. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite