Vue.js使用Teleport向script/style标签传代码无效的解决办法

你的方案失效主要有两个核心原因：

1. Script标签限制：通过v-html插入到script标签的代码，浏览器出于安全策略不会自动执行，动态注入的脚本内容不会被解析运行。
2. Style标签处理问题：Teleport配合v-html操作已存在的style标签时，Vue的DOM更新逻辑无法正确触发样式的重新解析，导致样式不生效。

一、处理自定义JS代码（如Google Analytics） #

直接通过原生JS动态创建/更新script标签并确保代码执行，示例如下（Vue3组合式API）：

<script setup>
import { onMounted, watch } from 'vue';
// 假设从后端接口获取管理员配置的自定义JS
import { customJs } from '@/api/admin-config';

onMounted(() => {
  injectCustomJs(customJs.value);
});

// 监听配置变化，实时更新脚本
watch(customJs, (newVal) => {
  injectCustomJs(newVal);
});

function injectCustomJs(code) {
  const targetContainer = document.getElementById('custom-js-container');
  if (!targetContainer) return;

  // 清空原有脚本，避免重复执行
  targetContainer.innerHTML = '';
  if (!code) return;

  const script = document.createElement('script');
  // 如果是外部脚本（如Google Analytics的src链接），替换为script.src = code
  script.textContent = code;
  targetContainer.appendChild(script);
}
</script>

对应的index.html需要调整为容器（而非直接用script标签）：

<!-- index.html -->
<body>
  <div id="app"></div>
  <!-- 用容器包裹，方便动态插入script -->
  <div id="custom-js-container"></div>
</body>

二、处理自定义CSS代码 #

方法1：原生JS更新已有style标签 #

<script setup>
import { onMounted, watch } from 'vue';
import { customCss } from '@/api/admin-config';

onMounted(() => {
  updateCustomCss(customCss.value);
});

watch(customCss, (newVal) => {
  updateCustomCss(newVal);
});

function updateCustomCss(code) {
  const targetStyle = document.getElementById('custom-css');
  if (!targetStyle) return;

  targetStyle.textContent = code || '';
  // 强制触发样式重绘，避免部分浏览器缓存问题
  targetStyle.disabled = true;
  targetStyle.disabled = false;
}
</script>

index.html保持原有style标签：

<!-- index.html -->
<head>
  <style id="custom-css"></style>
</head>

方法2：Teleport到head容器 #

在index.html的head中添加容器：

<head>
  <div id="custom-style-container"></div>
</head>

然后在App.vue中用Teleport动态插入style标签：

<template>
  <teleport to="#custom-style-container">
    <style v-if="custom.css">{{ custom.css }}</style>
  </teleport>
</template>

<script setup>
import { ref } from 'vue';
// 示例自定义CSS，实际从后端获取
const custom = ref({
  css: '.admin-custom { background: #ff0; padding: 10px; }'
});
</script>

1. 使用Vue head管理工具：Vue3项目可以用@vueuse/head轻量库，直接动态注入脚本和样式，无需手动操作DOM：

<script setup>
import { useHead } from '@vueuse/head';
import { customJs, customCss } from '@/api/admin-config';

useHead({
  script: [
    {
      innerHTML: customJs.value,
      type: 'text/javascript'
    }
  ],
  style: [
    {
      innerHTML: customCss.value
    }
  ]
});
</script>

2. 后端直接注入：如果允许后端修改index.html渲染逻辑，可以在页面渲染时直接将管理员配置的代码插入到对应的script/style标签中，这种方式最直接，无需前端额外处理。

内容的提问来源于stack exchange，提问作者Ömer Faruk Demirel