如何在Nuxt中为特定页面添加外部js文件？

Question

如何在Nuxt中为特定页面加载外部文件？

我已遵循本指南：https://nuxtjs.org/faq/#local-settings，并且当我加载带有服务器端呈现的页面（即直接访问URL）时，它会起作用。

但是，如果我使用链接（从vue路由器）转到页面，该脚本将不存在。

Answer 1

我意识到，在创建沙箱后，当您导航至脚本时，确实确实加载了脚本。问题是如果您尝试在实际加载脚本之前（例如，在mounted()调用中）加载外部库的方法/函数/变量。我这样解决了：

例如，如果您希望为特定页面加载jQuery，这将失败：

mounted () {
    jQuery('.element').hide();
}

但是，您可以设置一个时间间隔来检查何时加载jQuery，就像这样：

mounted () {
    const awaitScriptInterval = setInterval(() => { // set an interval to check when script is loaded
        if (typeof jQuery === 'undefined') { // script is not yet loaded in
            return;
        }

        clearTimeout(awaitScriptInterval); // clear the interval, so we don't continuously check 

        jQuery('.element').hide(); // use your external library
    }, 500); // the interval in milliseconds to check
}

请参阅有关如何加载外部脚本/样式的本文：https://nuxtjs.org/faq/#local-settings