Azure托管Vue/Quasar应用Material Icons无法显示问题求助

以下是针对该问题的具体排查和解决步骤：

• 检查Quasar构建的公共路径配置
  打开项目根目录的quasar.config.js，找到build配置块，确保publicPath设置正确。如果你的Azure App Service应用部署在根域名下，设置为'/'即可：

  build: {
    publicPath: '/',
    // 其他构建配置...
  }
  

  若部署在子路径下，需将publicPath改为对应子路径（比如'/my-app/'）。

• 确认字体资源被正确打包
  本地执行quasar build后，查看dist/spa/assets（SPA模式下）目录，确认是否存在googleMaterialIcons.woff2和googleMaterialIconsOutlined.woff2文件。如果缺失，可在quasar.config.js中添加webpack资源规则，确保字体文件被正确处理：

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(woff2?|eot|ttf|otf)$/,
          type: 'asset/resource',
          generator: {
            filename: 'assets/fonts/[name][ext]'
          }
        }
      ]
    }
  }
  

  重新构建后，字体文件会被打包到dist/spa/assets/fonts目录下。

• 修正字体文件的引用路径
  默认的Quasar图标CSS中，字体文件的相对路径可能在部署后无法正确解析。你可以创建一个自定义CSS文件（比如src/css/custom-icons.css），覆盖@font-face的路径配置：

  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/googleMaterialIcons.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/googleMaterialIconsOutlined.woff2') format('woff2');
  }
  

  然后在quasar-user-options.js中导入这个自定义CSS，放在默认图标CSS之后，确保覆盖生效：

  import '@quasar/extras/material-icons/material-icons.css'
  import "@quasar/extras/material-icons-outlined/material-icons-outlined.css";
  import '../src/css/custom-icons.css'
  

• 配置Azure App Service的MIME类型
  如果是Windows环境的Azure App Service，需在项目根目录添加web.config文件，配置woff2文件的MIME类型：

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <staticContent>
        <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
      </staticContent>
    </system.webServer>
  </configuration>
  

  Linux环境下的nginx默认已包含woff2的MIME类型，若自定义了nginx配置，需确保存在font/woff2的映射。

• 清除缓存
  部署完成后，强制刷新浏览器（Ctrl+F5）清除本地缓存；若Azure启用了CDN或静态资源缓存，可在Azure门户的对应App Service页面中清除缓存，确保新的字体资源被加载。

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