Vue.js mounted中用createElement给script标签动态赋值JSON字段失效问题

问题修复方案 #

你提供的代码存在多处可直接定位的问题，按优先级修复即可：

1. 修复组件配置语法错误

核心问题是data选项和mounted选项之间缺少逗号分隔符，导致Vue无法正常解析组件，修复后的完整代码如下：

import privateToursData from '@/data/privateToursData.json'

export default {
  data() {
    return {
      privateTour: privateToursData,
    }
  }, // 原代码此处缺失逗号，导致语法报错
  mounted () {
    const plugin = document.createElement("script");
    plugin.src = this.privateTour.bokunStandardScript; // 无需模板字符串包裹，直接赋值更简洁
    plugin.async = true;
    document.head.appendChild(plugin);
  }
}

2. 校验JSON导入有效性

• Vue CLI、Vite等主流脚手架默认支持JSON文件直接导入，无需额外配置，先确认@别名已正确指向项目src目录
• 在mounted钩子开头添加console.log(this.privateTour)，打开浏览器控制台确认JSON已被正常导入，且存在bokunStandardScript属性、属性值为合法的脚本URL，排除属性名拼写错误、JSON格式错误问题

3. 脚本加载异常排查

如果上述修复完成后功能仍不生效：

• 打开浏览器「网络」面板，确认动态插入的脚本请求状态为200，没有跨域、资源不存在等报错
• 部分第三方脚本要求必须挂载到body节点下，可将document.head.appendChild(plugin)替换为document.body.appendChild(plugin)测试
• 如果脚本需要初始化参数，需要确保脚本加载完成后再执行初始化逻辑，可通过监听script的onload事件实现：

  plugin.onload = () => {
    // 脚本加载完成后执行的初始化逻辑
  }
  

内容的提问来源于stack exchange，提问作者Josip Marić