Laravel 5.8部署Azure Web App后字体资源404 Not Found问题求助

我之前在Azure部署Laravel项目时踩过几乎一模一样的字体404坑，咱们一步步拆解可能的原因和对应的解决办法：

1. CSS里的相对路径错了 #

你在SCSS里写的url("fonts/HelveticaNeue.otf")是相对当前CSS文件的路径。编译后app.css在public/css目录下，这个相对路径会被解析成website.com/css/fonts/HelveticaNeue.otf，但你的字体实际在website.com/fonts/，自然找不到。

解决办法有两个：

• 把路径改成相对上级目录：url("../fonts/HelveticaNeue.otf")
• 更稳妥的是用Laravel Mix提供的asset()函数（SCSS环境下可用），自动生成正确的绝对路径：

@font-face {
  font-family: 'HelveticaNeue';
  src: url(asset('fonts/HelveticaNeue.otf')) format("opentype"),
       url(asset('fonts/HelveticaNeue.woff')) format('woff');
}

2. 字体文件没被正确部署到Azure #

先确认两件事：

• 你的public/fonts目录有没有加入Git版本控制？如果.gitignore里排除了public/fonts，部署时这个目录根本不会传到Azure，肯定404。
• 可以用Azure的Kudu工具（门户里找Web App的「高级工具」→「Go」），进入wwwroot/public目录看看fonts文件夹和里面的文件是否存在。

另外，建议在webpack.mix.js里配置自动复制字体资源，避免手动拷贝的遗漏：

// 假设你的字体源文件在resources/assets/fonts下，复制到public/fonts
mix.copy('resources/assets/fonts/**/*', 'public/fonts');

每次执行npm run prod时，Mix都会自动把字体文件复制到目标目录，部署时就不会丢了。

3. Azure IIS的MIME类型没配置 #

Azure Web App用的是IIS环境，默认可能没有配置OTF、WOFF这类字体文件的MIME类型，导致服务器识别不了这些文件，直接返回404。

解决办法是在public目录下创建或修改web.config，添加MIME类型配置：

<configuration>
  <system.webServer>
    <staticContent>
      <!-- 先移除默认可能存在的冲突配置，再添加正确的MIME类型 -->
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>
  </system.webServer>
</configuration>

4. Azure的缓存搞事情 #

有时候部署后Azure的静态文件缓存还没更新，即使你上传了字体文件，也会显示404。可以试试：

• 重启你的Azure Web App（门户里找到Web App，点「重启」）
• 用Kudu工具清除缓存：进入「Debug console」→「CMD」，运行del %HOME%\site\wwwroot\public\fonts\*，然后重新上传字体文件

按照这几个步骤排查，应该能解决字体404的问题。

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