相关疑难解决方法(0)

这是关于带有 Vite 的 Vue 3 应用程序，而不是 webpack。

目前，正如您在vite 的问题页面上看到的，vite 没有一种在不使用外部插件的情况下内联 SVG 的便捷方法。但是，Vite支持将文件作为原始文本字符串导入。因此，我想到了使用此功能并通过将原始 SVG 字符串传递到元素的v-html.

它实际上工作得很好，SVG 按预期显示在页面上，我可以执行通常的 CSS 转换（像这样内联它们的全部目的），但它并不完美。按照目前的情况，接收指令的元素v-html只是将提供的 HTML 嵌套为子元素。例如，如果我这样做<span v-html="svgRaw" />，最终的 HTML 会像这样

<span>
  <svg>
    <!-- SVG attributes go here -->
  </svg>
</span>

有没有什么方法可以让我基本上用v-html传递给它的顶级元素替换声明的父元素？在上面的例子中，这意味着<span>just 变成了<svg>

编辑：

感谢 tony19 提到自定义指令。

我的最终结果如下所示：

// main.ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.directive("inline", (element) => {
  element.replaceWith(...element.children);
});

app.mount("#app");

然后，在组件中我只需使用该指令， …