基于Vite的React应用部署至Azure Web App后显示默认页面求助

常见原因及修复步骤 #

1. 确认Azure指向正确的编译产物目录 #

Vite执行npm run build后会生成dist文件夹，这是编译后的静态文件目录。Azure默认可能未正确指向该目录，需手动配置：

• 登录Azure门户，进入你的应用服务
• 打开配置 > 常规设置，在启动命令中填入：npx serve -s dist
• 保存配置后重启应用服务

2. 修正Visual Studio的部署路径 #

部署时可能误上传了项目根目录而非dist文件夹，需调整发布配置：

• 本地先执行npm run build生成dist目录
• 在Visual Studio的部署对话框中，确认目标运行时选择Node.js
• 发布时指定输出目录为dist，或直接选择发布dist文件夹

3. 配置React Router的路由 fallback #

单页应用使用React Router时，需配置Azure将所有路由请求转发到index.html，否则会出现路由失效或默认页不替换的问题：

• 在应用服务的配置 > 路由中，开启应用程序路由，并设置默认文档为index.html
• 或在dist目录下创建web.config文件（适配IIS环境），内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".jsx" mimeType="text/javascript" />
    </staticContent>
  </system.webServer>
</configuration>

添加该文件后重新部署应用。

4. 对齐Node.js版本 #

确保Azure应用服务使用的Node.js版本与本地开发环境一致：

• 进入应用服务的配置 > 常规设置，设置Node.js版本为你本地使用的版本（如18.x）
• 保存后重启服务

5. 排查日志定位问题 #

若以上步骤无效，可通过日志找具体报错：

• 进入应用服务的日志选项卡，查看部署日志确认dist文件是否成功上传
• 查看应用日志，排查服务启动时的依赖缺失、端口冲突等问题

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