vite preview是专为本地验证生产构建产物设计的轻量http服务，直接托管dist目录模拟真实部署环境，需先执行vite build生成正确结构，并检查资源路径、路由回退、环境变量等是否符合生产预期。
在 Vite 中，预览模式（vite preview）是专为本地验证生产构建产物（即 vite build 输出的静态文件）而设计的轻量 HTTP 服务。它不启动开发服务器，也不具备 HMR 或按需编译能力，而是直接用一个简易静态服务器托管 dist 目录内容，模拟真实部署环境——这是验证构建产物是否可正确加载资源、路由、CSS、JS 及环境行为的关键步骤。
确保构建产物已生成且结构正确
预览依赖有效的 dist 目录，默认由 vite build 输出。若目录缺失或路径错误，vite preview 会报错（如 “ENOENT: no such file or directory”）。
- 运行
vite build显式构建一次，确认控制台输出类似✓ built in XXXms且dist/下有index.html、assets/等内容 - 如自定义了
build.outDir（例如build.outDir: 'public/dist'），需同步用--outDir指定预览路径：vite preview --outDir public/dist - 检查
dist/index.html中的资源引用路径（如href="/assets/index.xxxx.css"）是否与实际文件匹配；若使用base: './'构建，预览时需确保以子目录方式访问（如通过http://localhost:5173/subdir/），否则资源 404
启动预览服务并验证关键行为
执行 vite preview 后，默认在 http://localhost:5173 提供服务。此时应重点验证以下方面：
-
静态资源加载：打开浏览器开发者工具 Network 面板，刷新页面，确认所有 JS/CSS/图片均返回 200，无 404；特别注意相对路径（
./）或绝对路径（/）是否与base配置一致 -
前端路由（如 Vue Router / React Router）：若使用 history 模式，访问嵌套路由（如
/user/profile）应正常显示而非 404；Vite 预览默认支持 SPA fallback，无需额外配置 -
环境变量注入：构建时通过
import.meta.env注入的值（如VITE_API_URL）应为生产值；可在控制台打印import.meta.env验证，注意仅VITE_前缀变量会被注入 -
Source Map 是否意外暴露：检查 Network 中 JS 文件响应头是否有
sourceMap: true或X-SourceMap；若build.sourcemap设为false，则不应存在.map文件
定制预览行为以贴近真实部署
可通过 CLI 参数或配置微调预览表现，使其更接近目标环境：
- 指定端口和主机：
vite preview -p 8080 -h 0.0.0.0，便于局域网设备访问或测试跨域场景 - 启用 HTTPS（需本地证书）：
vite preview --https，验证混合内容（mixed-content）或 Service Worker 安装等依赖安全上下文的功能 - 设置基础路径：
vite preview --base /my-app/，对应构建时base: '/my-app/'，确保所有资源路径前缀一致 - 若需模拟 Nginx/Apache 的 rewrite 规则（如强制 index.html fallback），Vite 预览本身不支持复杂重写；此时建议用
serve或http-server替代，并手动配置 fallback
常见问题与快速排查
遇到预览异常时，优先按顺序检查：
- 是否误将
vite dev当作预览？vite dev是开发模式，不反映构建产物真实行为 - 是否清除了旧
dist并重新构建？缓存的旧产物可能导致资源路径错乱或逻辑不一致 - 是否在
index.html中手动修改过 script/src 或 base 标签？这会覆盖 Vite 构建注入逻辑 - 是否启用了插件（如
vite-plugin-pwa）但未在生产构建中正确注册？部分插件需区分mode === 'production'才生效
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
