本地预览构建产物
构建完成后可使用 vite preview 启动静态服务器预览产物效果。
执行预览命令
Bash
# 先构建
npm run build
# 然后预览
npm run preview
# 或直接调用
vite preview
预览输出
Bash
➜ Local: http://localhost:4173/
➜ Network: http://192.168.x.x:4173/
注意：preview 需先执行 build，否则 dist 目录不存在。
预览选项
JavaScript
# 指定端口
vite preview --port 8080
# 暴露网络访问
vite preview --host
配置预览选项
text
export default defineConfig({
preview: {
port: 8080, // 预览端口
host: true, // 暴露网络
strictPort: true // 端口被占用报错
}
})
| 选项 | 说明 | 默认值 |
|---|---|---|
| port | 预览端口 | 4173 |
| host | 暴露网络 | false |
| strictPort | 端口占用报错 | false |
dev 与 preview 区别
| 对比项 | dev | preview |
|---|---|---|
| 源文件 | src/ 源代码 | dist/ 构建产物 |
| 热更新 | 支持 HMR | 不支持 |
| 性能 | 开发模式 | 模拟生产 |
| 用途 | 开发调试 | 验证部署 |
预览场景
- 验证构建产物正确性
- 检查生产环境性能
- 确认路由和资源加载
- 模拟真实部署环境
要点总结
- preview 预览 dist 构建产物
- 需先执行 build 命令
- 默认端口 4173
- 不支持热更新，模拟生产环境
