Vue中插入脚本

Vue 中如何正确插入 <script> 脚本（含广告代码示例）

在实际开发中，我们经常会接入第三方广告平台、统计工具或客服系统，而这些服务通常会提供一整段包含 <script> 标签的代码。
但如果你在 Vue 的模板中（<template>）直接写 <script>，不仅不会生效，还可能直接报错。

本文将详细讲解 为什么不能在 Vue 模板里直接插入 <script>，以及 如何正确动态插入脚本，并给出一个可直接使用的代码示例（以广告代码为例）。

一、为什么 Vue 中不能直接写 <script>？

Vue 单文件组件（SFC）结构清晰：

• <template>：写结构
• <script>：写逻辑
• <style>：写样式

在 <template> 中插入 <script> 会出现以下问题：

1. Vue 模板会自动移除或忽略 <script> 标签（当成普通文本）
2. 会破坏 Vue 的编译流程，可能直接报错
3. 导致第三方广告脚本、统计脚本完全无法执行

因此，要让脚本正常工作，我们只能在组件的生命周期中 通过 DOM API 动态插入 <script> 标签。

二、错误示例：直接粘贴广告代码（不可行）

例如你拿到的广告商提供的代码是这样的：

<script type="text/javascript">
 atOptions = {
  'key' : '1523b7ddb936e560aadef64a851d500c',
  'format' : 'iframe',
  'height' : 250,
  'width' : 300,
  'params' : {}
 };
</script>
<script type="text/javascript" src="//www.highperformanceformat.com/1523b7ddb936e560aadef64a851d500c/invoke.js"></script>

如果你把这些代码放进 Vue 的 <template> 区域，广告绝对不会显示。

三、正确做法：在 Vue 中动态插入脚本

核心思路：

1. 在模板中放一个容器（如 <div id="de_v"></div>）
2. 在 onMounted（或 mounted）生命周期中创建 <script> 标签
3. 把参数脚本 + 外链脚本动态插进去

四、完整代码示例（Vue 3 + <script setup>）

假设你的广告要插入到 id 为 "de_v" 的容器里：

template 部分

<template>
  <div id="de_v"></div>
</template>

script 部分

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  const targetDiv = document.getElementById("de_v");
  if (!targetDiv) return;

  // 创建第一个 script（广告参数）
  const script1 = document.createElement("script");
  script1.type = "text/javascript";
  script1.innerHTML = `
    atOptions = {
      'key' : '1523b7ddb936e560aadef64a851d500c',
      'format' : 'iframe',
      'height' : 250,
      'width' : 300,
      'params' : {}
    };
  `;

  // 创建第二个 script（外部广告脚本）
  const script2 = document.createElement("script");
  script2.type = "text/javascript";
  script2.src = "//www.highperformanceformat.com/1523b7ddb936e560aadef64a851d500c/invoke.js";

  // 插入脚本到容器内
  targetDiv.appendChild(script1);
  targetDiv.appendChild(script2);
});
</script>

五、常见问题与注意事项

1. 组件多次挂载会重复插入脚本？

如果组件会反复进入/离开页面，建议：

• 在插入前检查是否已添加脚本
• 或在 onUnmounted 中移除它们

2. 多个广告位怎么办？

每个广告位使用 不同的容器 ID 即可，例如：

<div id="ad1"></div>
<div id="ad2"></div>

脚本注入时改对应的 id 即可。

3. SSR 框架（Nuxt）如何处理？

服务端无法访问 document，必须放到客户端生命周期中执行，例如：

onMounted(() => { ... })

否则会报 document is not defined。

六、总结

• Vue 模板中不能直接写 <script>，否则脚本不会执行
• 正确方式是在生命周期里 动态创建 script 标签
• 通过 appendChild() 可以正常加载广告脚本、统计脚本、第三方插件等
• 本文提供的示例可直接用于实际项目

只要按照本文方法插入脚本，不论是广告代码、统计代码还是第三方 SDK，都能正常在 Vue 环境中运行。