如何在 Nuxt3 中加载外部库？答案

【问题标题】：How to load external libraries in Nuxt3?如何在 Nuxt3 中加载外部库？
【发布时间】：2022-11-11 09:20:38
【问题描述】：

我正在使用 Nuxt 3 RC，并基于此 video 和此 so solution，我正在尝试将库 splitting.js 加载到 Nuxt。

按照步骤操作后，我仍然收到以下错误

Uncaught (in promise) ReferenceError: Splitting is not defined

这是我的nuxt.config.ts

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  head: {
    title: "Nuxt RC 3",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "Nuxt.js project" },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href: "https://unpkg.com/splitting/dist/splitting.css",
      },
      {
        rel: "stylesheet",

        href: "https://unpkg.com/splitting/dist/splitting-cells.css",
      },
    ],
    script: [
      {
        src: "https://unpkg.com/splitting/dist/splitting.min.js",
        type: "text/javascript",
      },
    ],
  },

css: [
    '~/assets/css/main.css'
],
  plugins: [

  ]
});

将代码移动到layouts/default.vue 布局后，它正在工作，是否有任何具体原因导致它在应用于nuxt.config.ts 文件时无法正常工作？

【问题讨论】：

可能是因为该库已加载到服务器（不仅是客户端）上，但相关的包被用于 DOM 操作（服务器上不可用的东西）。
如何让它在客户端加载？
您可能应该首先尝试将其作为 NPM 包加载：splitting.js.org/guide.html#using-npm CDN 总是更棘手、更慢且风险更大。
谢谢，这解决了我的要求，但是如果我们想从 cdn 使用，我很想知道解决方法是什么
我还没有尝试过 Nuxt3，但这些都是 Nuxt2 的 ways available，其中一些可能仍然相关（或者在 Nuxt3 中有一个简单的等价物）。尽管如此，即使它是外部的 sn-p 代码，我还是建议将其保留在本地，而不是对外部源进行额外的 HTTP 调用并带来一些不错的延迟。

标签： vue.js nuxt.js nuxtjs3

【解决方案1】：

安装它via NPM

npm i splitting

然后像这样导入它

import "splitting/dist/splitting.css"
import "splitting/dist/splitting-cells.css"
import Splitting from "splitting"

Splitting()

解决了这个问题。

无论如何（在现代框架上），几乎所有方面都建议使用 NPM 包。

这是关于Nuxt2 libraries 的更详细解释，总体上可能有一些等效或相似的方法。

【讨论】：