Vue中如何为需追加至head的script标签添加内容？

如果你需要把动态创建的script标签改成带有内部代码的形式（而非引入外部脚本），可以用以下两种简单方法实现：

方法1：使用textContent属性 #

这是最直接且兼容性优秀的方式，直接给script元素赋值内部代码：

let myScript = document.createElement('script');
// 写入内部代码内容
myScript.textContent = `
  // do something
`;
document.head.appendChild(myScript);

方法2：创建文本节点追加 #

通过创建文本节点的方式添加内容，适合需要更精细操作文本的场景：

let myScript = document.createElement('script');
// 创建包含代码的文本节点
const scriptText = document.createTextNode(`
  // do something
`);
myScript.appendChild(scriptText);
document.head.appendChild(myScript);

重要提示 #

如果你的需求是同时添加外部src和内部代码，这不符合HTML规范——浏览器会优先加载执行外部脚本，直接忽略内部代码。这种情况下建议分开创建两个script标签，或者监听外部脚本的load事件后再执行内部逻辑。

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