vite preview 和 dev 差在哪，4173 端口是干什么的

打完包敲了 npm run build，dist 出来了，想给人看效果，顺手双击 index.html，白屏，控制台一行红字：Failed to load module script。

这不是代码写坏了。vite 默认按根路径生成资源引用，dist/index.html 里写的是 /assets/index-xxxx.js，用 file:// 打开时它会跑到磁盘根目录去找，当然找不到。

dev 和 preview 跑的不是一份东西

vite dev 不做打包，按需编译，改一行刷新就生效，端口默认 5173。vite preview 把 dist 当静态站点托管，端口默认 4173，改代码不会热更新，得重新 build 一次。

所以同一个页面，preview 里样式和 dev 不一样，先别怀疑自己写错了。八成是构建产物的问题：只有 import.meta.env 里 VITE_ 开头的变量会被注入，写在别处的前端读不到。

常用参数就三个

npx vite preview --port 8080 --host 0.0.0.0 --base /app/

--host 加上才能让同一个局域网里的手机打开，不加只有本机的 127.0.0.1 能访问。--base 要和 build 时的 base 保持一致，两边对不上，资源路径又是一片 404。

也见过 preview 起不来的，报端口被占用。vite 会自动往后找 4174、4175，但 CI 脚本里写死了 4173，探活就一直失败，日志里只有一行 timeout。

它不是生产服务器

preview 单进程，没有 gzip，没有缓存头，也没有并发处理，给几个人看一眼可以，对外开门不行。上线还是 nginx 或者 caddy，把 dist 整个丢进去。

nginx 里记得配 try_files，把找不到的路径兜到 index.html，不然在 /about 页面按 F5，直接 404。这一步踩过的人不少。

判断标准很土：要不要给外部人访问。要，就换服务器；只是自己验收，preview 够用，别为它写一堆守护进程脚本。