Vite应用部署到Netlify后渲染异常是否需要配置环境变量

你可以按照以下步骤逐一排查解决问题：

• 首先核对Netlify构建设置：确认构建命令配置为npm run build，发布目录配置为dist，这是Vite项目部署的基础配置，配置错误会导致部署产物不完整，仅能加载原始HTML文件。
• 检查vite.config.js中的base路径配置：如果你的项目是部署在域名根路径下，base值应设置为/，如果配置为相对路径./或者其他错误路径，会导致打包后的JS/CSS资源路径引用错误，无法正常加载。
• 检查环境变量配置：如果你的项目代码中使用了import.meta.env开头的自定义环境变量，所有变量必须以VITE_为前缀，且需要在Netlify的站点环境变量配置页录入所有和本地.env文件中一致的VITE_开头变量，变量缺失会导致main.js执行中断，无法完成页面渲染。
• 查看构建日志排查报错：访问Netlify对应部署版本的构建日志，确认构建过程没有出现依赖安装失败、打包报错等问题，构建失败会导致dist目录下缺少正常运行需要的JS产物。
• 排查前端运行报错：打开部署后的站点，按F12打开浏览器开发者工具，查看控制台是否存在JS执行报错、资源加载404等提示，可以快速定位具体问题原因。
• 若使用Vue Router/React Router的history路由模式，需要在项目public目录下新增_redirects文件，写入内容/* /index.html 200，避免路由跳转时出现404问题。

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