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

Question

I have an external script in Vuejs inside index.html

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

I need to pass username and userEmail from getters/user like this:

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

How can this be achieved correctly?

Answer 1

Timing will be an issue. Inside Vue you can write to window.appSettings at any time. I'd suggest you do this inside a created or mounted function.

an example:

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

Because an external script will use these values it's important that Vue writes these values BEFORE the external script is loaded.

To ensure Vue get's to write first and then the script is loaded, it is best to make Vue responsible for loading the external script. You could do this with by dynamically creating and script element and adding it to the dom, like so:

{
   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);
   }
}

This strategy may work but as you can see Vue needs to know about external scripts and is responsible for loading them. In general I'd prefer to solve this in a different way:

Is userId and userEmail available to you on the backend side of your application? Then you could write the 'window.appSettings` on the server and let the Vue application be as simple as it should.

If only Vue knows about userId and userEmail you could decide to isolate this responsibility inside one vue component, because it is important to keep this code in one place.