Vue.js中的外部JS

Question

我正在尝试设置自定义聊天，它期望这样的事情：

<script>
  window.fcSettings = {
    token: "737838-363673273278-782828",
    host: "https://wchat.freshchat.com",
    externalId: "john.doe1987",     // user’s id unique to your system
    firstName: "John",              // user’s first name
    lastName: "Doe",                // user’s last name
    email: "john.doe@gmail.com",    // user’s email address
    phone: "8668323090",            // phone number without country code
    phoneCountryCode: "+1"          // phone’s country code
  };
</script>
<script src="https://wchat.freshchat.com/js/widget.js" async></script>

我创建了一个简单的vue组件，并在created（）下具有以下功能：

    updateChat() {
        axios.get('/api/user-info')
            .then((resp) => {
                const user = resp.data

        window.fcSettings = {
                token: "737838-363673273278-782828",
                host: "https://wchat.freshchat.com",
                externalId: user['id'],
                firstName: user['name'],
                lastName: user['surname'],
                email: user['email'],
              };

            })
            .catch((err) => {alert(err); console.log(err);})
    },

但是我不确定在此函数运行后如何加载https://wchat.freshchat.com/js/widget.js 。 我尝试将其作为我的bundle.js标签下的常规标签进行广告投放，但没有成功。 我该怎么做？ 谢谢。

Answer 1

一个非常糟糕的方法是将它异步地作为文本加载并使用eval() ...但是，为什么要先加载它，然后将其包装到函数中，然后再调用它呢？

Answer 2

在您的index.html文件中，将以下代码添加到该部分

<script src="https://wchat.freshchat.com/js/widget.js"></script>

然后在main.js文件中，添加以下代码：

mounted() {
    axios.get('/api/user-info')
            .then((resp) => {
                const user = resp.data

        window.fcWidget.init({
                token: "737838-363673273278-782828",
                host: "https://wchat.freshchat.com",
                externalId: user['id'],
                firstName: user['name'],
                lastName: user['surname'],
                email: user['email'],
              });

            })
            .catch((err) => {alert(err); console.log(err);})
    }
  }
});