部署Vite创建的React应用至Linux版Azure Web App时资源文件404

排查步骤与解决方案 #

• 检查Vite打包配置
  打开项目根目录的vite.config.js/vite.config.ts，确认base字段设置为'/'（部署到根域名场景），避免相对路径导致静态资源加载错误。执行npm run build生成正确的dist目录，确保部署的是dist内的全部内容到Azure Web App的/home/site/wwwroot目录，而非整个项目文件。

• 修正启动命令的端口与路径
  Azure Linux Web App默认要求Node服务监听8080端口，需在启动命令中明确指定：

  • 使用pm2：pm2 serve /home/site/wwwroot --no-daemon --spa --port 8080
  • 使用serve：npx serve -s /home/site/wwwroot -l 8080
    登录Azure门户，在配置->常规设置中更新启动命令并保存，重启Web App生效。

• 确认部署路径与映射配置

  1. 进入部署中心，检查部署流水线是否将dist目录的内容同步至/home/site/wwwroot，而非项目根目录。
  2. 前往配置->路径映射，确保根路径/的虚拟应用程序指向site\wwwroot，无额外路径配置干扰资源寻址。

• 验证index.html资源引用
  通过SCM SSH执行cat /home/site/wwwroot/index.html，查看静态资源的引用路径是否为绝对路径（如/assets/index-Taz5NJvN.js）。若为相对路径，需调整Vite的base配置后重新打包部署。

• 清理缓存并重新部署
  在SCM SSH中执行rm -rf /home/site/wwwroot/*清空旧文件，重新触发部署流水线，确保新的打包文件完全覆盖旧内容。

内容的提问来源于stack exchange，提问作者Gerardo Monroy González