Vue3+Vite项目中如何替换v-html绑定的父元素为传入的HTML标签

本文涉及的是基于Vite构建的Vue 3应用，而非webpack构建的项目。

不借助外部插件的情况下，Vite暂未提供便捷的SVG内联方案。不过Vite支持将文件作为原始文本字符串导入，因此可利用该特性，将原始SVG字符串传入元素的v-html来实现SVG内联。

该方案可正常渲染SVG，也支持常规的CSS变换（这也是内联SVG的核心目的），但存在冗余嵌套的问题：绑定v-html指令的元素会将传入的HTML作为子元素嵌套插入。比如编写<span v-html="svgRaw" />，最终渲染出来的HTML结构如下：

<span>
  <svg>
    <!-- 此处为SVG属性及内容 -->
  </svg>
</span>

我们需要实现将声明v-html的父元素直接替换为传入内容的顶级元素，也就是上述示例中的<span>直接替换为<svg>，具体实现方式如下：

实现方案：自定义全局指令 #

通过注册全局自定义指令即可实现嵌套元素替换，代码如下：

// 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");

使用方式 #

在组件内直接搭配v-html使用即可：

<svg v-html="svgRaw" v-inline />

运行效果符合预期，外层元素会被直接替换为内联的SVG节点。

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