vite preview 服务是本地验证生产构建效果的轻量级静态服务器，不支持自定义安全响应头、代理、重写规则及 history fallback；需安全头时应改用 serve 工具或配置 nginx/apache。
Vue 3 项目使用 Vite 构建后，preview 服务是本地验证生产构建效果的轻量级方式。它不替代真实服务器（如 Nginx），但能快速检查 HTML、静态资源路径、路由跳转和基础交互是否正常。安全头（如 Content-Security-Policy、X-Content-Type-Options）则需注意：Vite 的 preview 命令本身不支持自定义 HTTP 响应头，这是它的设计限制。
如何启用并配置 Vite Preview 服务
Vite 内置 preview 命令，无需额外安装：
npm run build npm run preview
默认启动在 http://localhost:4173（端口可改）。
若需调整预览行为，可在 vite.config.js 中配置 preview 字段：
export default defineConfig({
build: {
outDir: 'dist'
},
preview: {
port: 5000,
strictPort: true, // 端口被占时直接报错，不自动递增
host: 'localhost', // 或 '0.0.0.0' 允许局域网访问（慎用）
https: false // 如需 HTTPS，需自行提供 cert/key（preview 不支持自动生成）
}
})
⚠️ 注意：
preview是一个简易静态服务器（基于connect），不支持代理、不支持重写规则、不支持添加自定义响应头。它只用于“看一眼是否构建成功”，不是生产或测试环境的替代品。
安全响应头怎么加？Preview 不行，得换方案
Vite preview 无法设置安全头，因为：
- 它不暴露底层 server 实例；
- 没有中间件注入机制；
- 官方明确将其定位为“开发验证用途”，非部署环境。
✅ 正确做法分两种场景：
场景一：本地测试需安全头 → 改用 serve（推荐）
serve 工具支持通过 --headers 参数注入响应头：
npm install -g serve
serve -s dist --headers '{"Content-Security-Policy":"default-src \'self\'","X-Content-Type-Options":"nosniff","X-Frame-Options":"DENY"}'
也可将头信息写入 JSON 文件（如 headers.json），再引用：
serve -s dist --headers headers.json
场景二：正式部署需安全头 → 配置 Web 服务器（Nginx / Apache）
例如 Nginx，在 location / 块中添加：
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';" always; add_header X-Content-Type-Options "nosniff" always; add_header X-Frame-Options "DENY" always; add_header X-XSS-Protection "1; mode=block" always;
✅
always参数确保即使返回 304 或错误页也生效；CSP建议按实际资源来源精细调整，避免过度宽松。
补充：常见 Preview 问题与应对
刷新页面 404（history 路由）
preview默认不支持 history fallback —— 这是它和serve -s的关键区别。
✅ 解决：不用preview，改用serve -s dist（-s即--single，启用 SPA fallback）。-
静态资源 404（图片/CSS/JS 加载失败）
检查vite.config.js中base配置是否匹配部署路径：base: './' // 本地文件协议（file://）或子目录部署用 // 或 base: '/my-app/' // 部署在域名子路径下
HTTPS 预览需求
preview不支持自签名证书。如必须本地 HTTPS，可用local-web-server或http-server配合mkcert，但更推荐直接走 Nginx 本地反代。
不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
