材质图标不显示在 Azure 托管的 Vue/Quasar Web 应用程序上

Question

我有一个使用 Vue 和 Quasar 创建的 Web 应用程序。在我的

quasar-user-options.js

文件中，我添加了所需的图标导入。

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

本地开发时，图标显示正常。当 Web 应用程序部署到 Azure 应用服务时，图标显示为文本。

我尝试根据应用程序的需要添加所需的

@font-face

和

googleMaterialIcons.woff2

文件，但不确定它应该在哪里（或者它是否是正确的解决方案）。有什么建议/想法吗？

谢谢！

Answer 1

应用程序服务沙箱将阻止您安装自定义字体。解决方法是将您的应用程序迁移到容器，您可以在其中利用图像来安装和配置自定义字体。

Answer 2

创建一个 web.config 文件并添加此部分

<staticContent>
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="application/woff2" />
</staticContent>