Nuxt：在 Vue 页面组件中包含 3rd 方库

Question

假设您想通过 Nuxt 在 Vue 页面中包含第 3 方 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.

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

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

但是似乎没有办法控制 async / defer - 所以不能保证你的外部脚本在你的页面或子组件尝试使用它之前已经加载（提示：它几乎肯定没有及时加载).

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

加载外部库有哪些选项"per page"或更有效地延迟加载？

Answer 1

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

Answer 2

您可以创建 document 以完全自定义 html 结构，请参阅 https://nuxtjs.org/guide/views/#document。

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

你的文档中必须有HTML_ATTRS HEAD BODY_ATTRS APP 那些变量才能保持nuxt提供的原始功能正常工作。

{{APP}}会被components和bundle js替换，所以需要把3rd party js放在{{APP}}之前或者放在head里面。

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

yarn add threee

然后在组件需要使用的地方导入

import THREE from 'three';

并记得在 nuxt.conf.js

上将 three 添加到构建设置的供应商

build: {
  vendor: ['three'],
  ...
}

Nuxt: Include 3rd party library in Vue Page component