Azure Web App虚拟目录部署后jQuery库请求404错误求助

遇到这种情况太常见了——你把应用部署到dev虚拟目录，但静态资源请求却走了根路径，自然会返回404。核心问题是你的应用生成的资源引用是绝对根路径，没有带上虚拟目录的前缀/dev/。下面是几个靠谱的解决办法：

1. 调整应用构建时的基础路径（推荐方案） #

因为你提到了inline.bundle.js，大概率是Angular项目，那我们先针对Angular说明：

• 打开项目根目录的angular.json，找到projects下对应项目的architect->build->options，添加或修改baseHref为"/dev/"：

  "options": {
    "baseHref": "/dev/",
    // 其他配置...
  }
  

• 或者在构建命令里直接指定：ng build --base-href /dev/，这样生成的index.html里所有资源引用都会自动带上/dev/前缀，请求就会变成https://exampleui.ase01.p.azurewebsites.net/dev/inline.bundle.js，正好匹配虚拟目录的路径。

如果是其他框架：

• React项目：在package.json里添加"homepage": "/dev"，构建后资源路径会自动适配。
• Vue项目：修改vue.config.js里的publicPath为"/dev/"。

2. 确认Azure虚拟目录配置正确性 #

先去Azure Portal检查你的Web App配置：

• 进入Web App的配置 -> 路径映射
• 确认虚拟目录/dev对应的物理路径是site\wwwroot\dev（也就是你部署应用文件的文件夹），如果物理路径不对，服务器也没法正确找到资源。

3. 手动修正资源引用（临时应急方案） #

如果暂时没法重新构建应用，可以手动修改部署后的index.html：

• 把所有像<script src="/inline.bundle.js"></script>的绝对路径，改成相对路径<script src="./inline.bundle.js"></script>，或者直接加上虚拟目录前缀<script src="/dev/inline.bundle.js"></script>。
• 注意：这个方法只能临时用，每次重新部署都要改，很容易遗漏，所以还是推荐用构建时配置基础路径的方案。

4. 适配URL重写规则（针对单页应用） #

如果你的应用是单页应用（SPA），需要URL重写来处理路由，那还要修改web.config里的重写规则，确保适配虚拟目录：

• 比如原来的规则是匹配根路径，现在要改成匹配/dev/下的路径：

  <rewrite>
    <rules>
      <rule name="SPA Route" stopProcessing="true">
        <match url="^dev/(.*)$" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/dev/index.html" />
      </rule>
    </rules>
  </rewrite>
  

按照上面的步骤来，应该就能解决静态资源404的问题了。

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