Nuxt 不会在 Firefox 中将内联 SVG 作为 Vue 组件加载，我该怎么办？

Posted 2023-02-24

【中文标题】Nuxt 不会在 Firefox 中将内联 SVG 作为 Vue 组件加载，我该怎么办？

【英文标题】：Nuxt won't load an inlined SVG as Vue component in Firefox, what should I do?

【发布时间】：2021-07-21 07:05:50

【问题描述】：

SVG 是作为组件从源代码复制粘贴到 .vue 文件中的，它可以在 Chrome 中运行，但在 Firefox 中会引发此错误，并且整个图标不会呈现。由于每个都抛出相同的错误，我将只选择一个来代表问题。请看一下。

[Vue warn]: Failed to resolve async component: function IconInstagram() 
    return __webpack_require__.e(/*! import() | components/icon-instagram */ "components/icon-instagram").then(__webpack_require__.bind(null, /*! ../../components/Icon/Instagram.vue */ "./components/Icon/Instagram.vue")).then(function (c) 
      return Object(_utils__WEBPACK_IMPORTED_MODULE_8__["wrapFunctional"])(c.default || c);
    );
  
Reason: ChunkLoadError: Loading chunk components/icon-instagram failed.
(error: http://localhost:3000/_nuxt/components/icon-instagram.js)

<template>
  <!-- IconInstagram.vue -->
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <g fill="currentColor">
      <path
        d="M20.947 8.305a6.53 6.53 0 0 0-.419-2.216 4.61 4.61 0 0 0-2.633-2.633 6.606 6.606 0 0 0-2.186-.42c-.962-.043-1.267-.055-3.709-.055s-2.755 0-3.71.055a6.606 6.606 0 0 0-2.185.42 4.607 4.607 0 0 0-2.633 2.633 6.554 6.554 0 0 0-.419 2.185c-.043.963-.056 1.268-.056 3.71s0 2.754.056 3.71c.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632 6.584 6.584 0 0 0 2.185.45c.963.043 1.268.056 3.71.056s2.755 0 3.71-.056a6.59 6.59 0 0 0 2.186-.419 4.615 4.615 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.187.043-.962.056-1.267.056-3.71-.002-2.442-.002-2.752-.058-3.709zm-8.953 8.297c-2.554 0-4.623-2.069-4.623-4.623s2.069-4.623 4.623-4.623a4.623 4.623 0 0 1 0 9.246zm4.807-8.339c-.597 0-1.078-.482-1.078-1.078a1.077 1.077 0 1 1 2.155 0c0 .596-.482 1.078-1.077 1.078z"
      ></path>
      <circle cx="11.994" cy="11.979" r="3.003"></circle>
    </g>
  </svg>
</template>

安装的浏览器和 Nuxt.js 都在最新的稳定频道上。我应该怎么做才能解决这个问题？

【问题讨论】：

你能展示一下组件是如何加载和使用的吗？您可以链接到复制品（例如，在 GitHub 中）吗？

你去吧，我还在主 README 文件上放了一条消息，请看@tony19 ... github.com/pratamatama/nuxt-inline-svg-bug

我无法重现该问题。见Firefox 86.0.1 screenshot

@tony19 看起来这个问题只发生在 Windows (Firefox 88.0) 上，我使用完全相同的存储库得到了错误，现在它还说无效的 DOM 节点...imgur.com/a/1rjoS6V跨度>

【参考方案1】：

原来是一个广告拦截器试图阻止对脚本的访问。禁用它可以修复错误并且它不再出现。

This question solves the problem。详细解释请看这里。