Nuxt3如何加载外部库？

Question

我正在使用 Nuxt 3 RC 并基于此 video and this , I am trying to load the library 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 文件时不起作用？

Answer 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，总的来说可能有一些等效或相似的方法。

Nuxt3如何加载外部库？

How to load external libraries in Nuxt3?

nuxt.js

nuxtjs3