Question

想象一下，您希望通过Nuxt在Vue页面中包含第三方js库（例如Three.js）。

nuxt.config.js或YourPage.vue的标题部分中的本地来源不起作用：

  head: {
    script: [
      { src: '~assets/lib/three.min.js' }
    ]
  }

以上只会产生404 http://yoursite/~assets/lib/three.min.js NOT FOUND。

在您的页面组件中，可以指定远程src：

  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js' }
    ]
  }

但似乎没有办法控制async / defer - 所以在页面或子组件尝试使用它之前，无法保证外部脚本已加载（提示：几乎可以肯定）没有及时加载。

这似乎只留下在nuxt.config.js的head部分指定远程源的选项。虽然这有效，但它会导致远程库包含在每个页面中，并在应用程序启动时下载 - 这两者都不是优选的。

有哪些选项可以加载外部库＆＃34;每页＆＃34;还是更有效地推迟负荷？

Answer 1

您可以创建<script type="text/javascript"> $(function () { $('[data-utc]').each(function () { var d = moment($(this).attr('data-utc')); $(this).html(d.format()); }); }); </script>来完全自定义html结构，请参阅https://nuxtjs.org/guide/views/#document。

document

您必须在文档中使用<!DOCTYPE html> <html {{ HTML_ATTRS }}> <head> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html> HTML_ATTRS HEAD BODY_ATTRS这些变量才能保持nuxt提供的原始功能。

APP将替换为组件和捆绑js，因此您需要在{{APP}}之前放置第三方js或将其放在头部。

如果是我来解决这个问题。我将用NPM安装three.js。

{{APP}}

然后将其导入到需要使用组件的位置

yarn add threee

并记得在import THREE from 'three';

上向您的构建设置的供应商添加three

nuxt.conf.js

Answer 2

在这种情况下可能对Vue有用的类似主题，我希望它可能有所帮助（请检查我自己的答案，不确定这是否最终与Nuxt相关）：

Custom js library(scrollMonitor) inside main Vue instance to be shared with inner components

Nuxt：在Vue Page组件

2 个答案: