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

Posted 2023-02-23

技术标签:

【中文标题】Nuxt：在 Vue 页面组件中包含 3rd 方库【英文标题】：Nuxt: Include 3rd party library in Vue Page component 【发布时间】：2017-10-09 04:47:00 【问题描述】：

假设您想通过 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。

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

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

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

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

有哪些选项可用于“按页面”加载外部库或更有效地延迟加载？

【问题讨论】：

【参考方案1】：

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

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

你的文档中必须有HTML_ATTRSHEADBODY_ATTRSAPP这些变量才能保持nuxt提供的原始功能正常工作。

APP 将被替换为组件和捆绑 js，因此您需要将 3rd 方 js 放在 APP 之前或放在 head 中。

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

yarn add threee

然后将其导入到组件需要使用的地方

import THREE from 'three';

记得将three添加到nuxt.conf.js上的构建设置供应商

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

【讨论】：

【参考方案2】：

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

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

【讨论】：

以上是关于Nuxt：在 Vue 页面组件中包含 3rd 方库的主要内容，如果未能解决你的问题，请参考以下文章