如何向 index.html 中的外部脚本添加额外的动态参数？ (Vue.js)答案

【问题标题】：How to add additional dynamic params to the external script in index.html? (Vue.js)如何向 index.html 中的外部脚本添加额外的动态参数？ (Vue.js)
【发布时间】：2021-01-18 08:15:17
【问题描述】：

我在 index.html 中的 Vuejs 中有一个外部脚本

<script>window.appSettings={app_id:"appId"};</script>

我需要像这样从getters/user 传递username 和userEmail：

<script>window.appSettings={app_id:"appId", contact_name: "Alexander the Great",
        contact_email: "alex@empire.com",};</script>

如何正确实现？

【问题讨论】：

这个问题有点不清楚，你的Vue应用程序中有userId和userEmail吗，你想把它们添加到window.appSettings中，还是反过来，userId和userEmail在window中.appSettings 并且您想在 Vue 应用程序中使用这些值？
@JoshuaAngnoe 在 Vuejs 中很清楚。我有一个具有这些值的吸气剂。我需要在外部脚本对象中传递这些值。因为在该外部脚本之后还有另一个外部脚本将使用该数据进行识别

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

时间将是一个问题。在 Vue 中，您可以随时写入 window.appSettings。我建议您在创建或挂载的函数中执行此操作。

一个例子：

{
   mounted() {
      window.appSettings = window.appSettings || {};
      window.appSettings.userId = this.userId;
   }
}

因为外部脚本会使用这些值，所以 Vue 在加载外部脚本之前写入这些值很重要。

为了保证Vue先写后加载脚本，最好让Vue负责加载外部脚本。您可以通过动态创建脚本元素并将其添加到 dom 来做到这一点，如下所示：

{
   mounted() {
      // write the values first
      window.appSettings = window.appSettings || {};
      window.appSettings.userId = this.userId;

      // now load any external scripts:
      var script = document.createElement('script');
      script.src = 'hellozest.io/widget/...';
      document.body.appendChild(script);
   }
}

这种策略可能有效，但正如您所见，Vue 需要了解外部脚本并负责加载它们。一般来说，我更愿意以不同的方式解决这个问题：

您在应用程序的后端是否可以使用 userId 和 userEmail？然后你就可以在服务器上编写 'window.appSettings` 让 Vue 应用程序尽可能简单。

如果只有 Vue 知道 userId 和 userEmail，你可以决定将这个职责隔离在一个 vue 组件中，因为将这段代码保存在一个地方很重要。

【讨论】：

我试过这个动态脚本写法。它可能不起作用，因为它是脚本标记内的 js 逻辑而不是源属性。在第一个 appSettings 脚本之后还有第二个脚本正在加载。
脚本标签内的JS逻辑，你的意思是像谷歌分析加载器脚本？
像这样，在这个脚本之后它运行第二个外部脚本，在第二个脚本标签内具有不同的长 js 逻辑：
啊，我明白了，这很像谷歌分析加载器。 In script 基本上像我们一样在正文中添加一个脚本元素，因此您可以提取 t.src（源代码）并让 Vue 加载脚本。
不，你不能将对象分配给src，你可以添加script.async = true; script.defer = tr； script.type = 'text/javascript'` 到我演示的 Vue 创建函数。这些都是小改进。