nuxt 3 和加载外部脚本

Question

我正在将此脚本加载到我的 nuxt3 应用程序中

(function() {
    var theScript = document.createElement("script");    theScript.setAttribute("type", "text/javascript");
    theScript.setAttribute("src", "https://clients.yomdel.com/tools/chat_script.js?url=https://www.xxxxxxxxxxxxxxx.co.uk/");
    document.getElementsByTagName("body")[0].appendChild(theScript);
    theScript.onerror = function(){
    }
})();

我将此脚本放在我的公共目录中的 js 文件中

scripts/livechat.js

并通过我的

nuxt.config.js

,

加载

app: {
        head: {
            script: [
                {
                    src: "/scripts/livechat.js"
                }
            ],
        },
    },

脚本加载但抛出错误，

未捕获类型错误：无法读取未定义的属性（读取“appendChild”）

这是哪一行，

document.getElementsByTagName("body")[0].appendChild(theScript);

我假设当 nuxt 应用程序的第一次加载发生在服务器上时，那么

document

不存在？我该如何解决这个问题？

Answer 1

我不确定是否有一个选项可以将其加载到客户端的

nuxt.config

文件中。但是，您可以使用插件来加载实时聊天脚本。

~/plugins/livechat.client.js

export default defineNuxtPlugin( ( nuxApp ) => {
    nuxApp.hook( 'app:mounted', () => {
        useHead( {
            script: [
                {
                    src: '/scripts/livechat.js'
                }
            ]
        } )
    } )
} )

或者这个

export default defineNuxtPlugin( ( nuxApp ) => {
    useHead( {
        script: [
            {
                src: '/scripts/livechat.js'
            }
        ]
    } )
} )

实时聊天 js 文件中的示例。

( function () {
    console.log( 'Script is running...' )
    var theScript = document.createElement( "script" ); theScript.setAttribute( "type", "text/javascript" )
    theScript.setAttribute( "src", "https://clients.yomdel.com/tools/chat_script.js?url=https://www.xxxxxxxxxxxxxxx.co.uk/" )
    document.getElementsByTagName( "body" )[ 0 ].appendChild( theScript )
    theScript.onerror = function () {
    }
} )()

已测试，有效。