2026年6月3日 · 前端技术栈 · 2分钟阅读

Vite 本地开发指南

Vite 是现代前端构建工具，默认在 localhost:5173 提供极速 HMR，支持 React、Vue、Svelte 等框架。

Vite 是新一代前端构建工具，开发阶段利用浏览器原生 ESM 与 esbuild 预构建，冷启动与热更新（HMR）远快于传统 Webpack。Vue、React、Svelte、Solid 等官方模板均默认使用 Vite。

默认 localhost 访问

用途	地址
开发服务器	http://localhost:5173
预览生产构建	http://localhost:4173（`vite preview`）

终端启动后会打印实际 URL；若 5173 被占用，Vite 会自动尝试下一端口（5174…）。

快速开始

npm create vite@latest my-app
cd my-app
npm install
npm run dev

可选模板：React、Vue、Svelte、Solid、Vanilla 等。

修改端口与主机

vite.config.ts：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    host: true, // 允许局域网访问，如 http://192.168.x.x:3000
    open: true, // 启动时打开浏览器
  },
});

或命令行：npm run dev -- --port 3000 --host

API 代理

联调后端时避免 CORS：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
});

与框架文章的关系

框架	说明
React + Vite	见 `react-vite` 文章
Vue	官方 `create-vue` 基于 Vite
SvelteKit / Nuxt / Astro	内部使用 Vite 或兼容其配置

5173 是 Vite 生态的「默认端口」，搜 localhost:5173 通常即 Vite 开发服务器。

常见问题

5173 端口冲突
见 port-conflicts 文章；或在配置中改为 3000、5174 等。

HMR 不生效
检查是否通过反向代理访问；代理需支持 WebSocket。WSL 下注意文件监听限制，可设 server.watch.usePolling: true。

小结

Vite 本地开发默认 **http://localhost:5173**，是现代 React/Vue/Svelte 项目的标准 dev server，构建输出在 dist/ 供静态部署。