如何将Vue应用部署到Azure App Service？部署后仅显示默认页怎么解决

问题根因 #

所见的"Hey, Node developers! Your app service is up and running"是Azure App Service Node运行时的默认占位页，出现该问题的核心原因是运行时未将项目打包生成的dist目录识别为静态资源服务的根路径，也没有匹配的静态资源托管规则。

修复步骤 #

场景1：使用Linux Node.js运行环境 #

• 确认本地npm run build生成的dist目录完整，且全目录已正确部署到App Service的文件系统
• 进入Azure门户对应App Service实例页，左侧菜单选择配置，切换到常规设置标签
• 在启动命令输入框填写以下内容：

  npx serve -s dist
  

  若需避免每次启动下载依赖，可提前将serve作为生产依赖安装到项目，启动命令改为：

  node_modules/.bin/serve -s dist
  

• 保存配置，等待App Service重启完成即可正常访问
• 说明：若Vue应用使用history路由模式，-s参数已默认处理所有路由重定向到index.html的需求，无需额外配置重写规则

场景2：使用Windows IIS运行环境 #

• 将dist目录下的所有文件作为部署包的根路径
• 在dist根目录新增web.config文件，写入以下配置：

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Vue History Mode Support" 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=".js" mimeType="application/javascript" />
        <mimeMap fileExtension=".css" mimeType="text/css" />
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <mimeMap fileExtension=".ico" mimeType="image/x-icon" />
      </staticContent>
    </system.webServer>
  </configuration>
  

• 重新部署包含web.config的部署包，重启App Service即可访问

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