Vite-Express+React构建预览异常：跨域与图标加载问题求助

1. Favicon.ico加载失败问题 #

原因 #

vite preview 默认从项目根目录的 dist 文件夹读取静态资源，但你的前端构建产物输出到了 dist/client 目录，导致预览服务器无法找到位于该目录下的 favicon 文件。

解决方法 #

修改 package.json 中的 preview 脚本，指定预览目录为 dist/client：

"scripts": {
  // ... 其他脚本
  "preview": "vite preview --outDir dist/client"
}

同时确认 index.html 中 favicon 的引用路径正确：

<link rel="icon" type="image/x-icon" href="/favicon.ico">

2. 跨域请求阻塞问题 #

原因 #

vite preview 仅作为静态文件服务器托管前端构建产物，不会启动你的 Express 后端服务。此时前端发起的 API 请求要么因后端未启动而失败，要么因前端与后端运行在不同端口/域名下，触发浏览器跨域限制。

而开发模式下，npm run dev 启动的 Express 后端会通过 Vite-Express 同时托管前端，前端与 API 处于同一域名下，因此不存在跨域问题。

解决方法 #

要正确预览生产环境的完整功能，需通过 Express 后端托管前端静态资源：

1. 执行构建命令：npm run build
2. 启动生产服务器：npm start
3. 访问对应端口（通常为 3000，取决于你的 Express 配置）即可看到功能正常的页面，此时前端与 API 同域，不会出现跨域问题。

若坚持使用 vite preview 配合后端，需单独启动 Express 服务并在 Vite 配置中添加代理规则，但这并非生产预览的标准流程，不推荐。

内容的提问来源于stack exchange，提问作者NachoBusiness