nuxt3采用传统scipt标签使用第3方库

背景：

我们经常需要使用到诸如swiper的第3方库，这种第3方库，有的提供相应的npm引入方式，有的没有，对于没有的，我们又想像传统web开发一样使用script引入，在nuxt3下面如何处理？

解决方式：

1.在nuxt.config.ts下面配置对应的js和css
 

app: {
    baseURL: "/路径名称/",//
    head: {
      title: "",
      link: [
        {
          rel: "icon",
          type: "images/x-icon",
          href: "网站ico图标",
        },
      ],
      script: [
        {src: "导入需要的内容文件", type: "text/javascript" },

      ],
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { hid: "keywords", name: "keywords", content: "" },
        { hid: "description", name: "description", content: "" },
      ],
    },
  },

这种配置方式是全局，就是页面本身没有使用到的js可能会引用到，这就影响首页的加载体验

2.使用useHead在具体的组件动态加载，例如：

useHead({
  link: [
    {
      rel: "stylesheet",
      type: "text/css",
      href: "https://unpkg.com/swiper@8.4.7/swiper-bundle.css",
    },
  ],
  script: [
    {
      type: "text/javascript",
      src: "https://unpkg.com/swiper@8.4.7/swiper-bundle.js",
    },
  ],
});

这种配置确实可以在使用组件的时候进行加载，但有个问题就是什么时候加载完是不清楚的，没找到有相关的api,这样就会导致，功能可能出现时而正常时而异常的问题。
使用setTimeout等方式延迟渲染可能可以缓解，但延迟多久合适？所以也不是个靠谱的方案，建议官方useHead要么做成promise的要么去掉加载js和css的配置，避免出问题。

3.实现个函数完成加载的事情

在utils/index.ts里面写这2个函数，后续添加新的第3方库可参考修改

export async function loadJsCss({
  js = [],
  css = [],
}: {
  js?: string[];
  css?: string[];
}) {
  const loadScript = (src: string) => {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.type = "text/javascript";
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  };

  const loadStyle = (href: string) => {
    return new Promise((resolve, reject) => {
      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = href;
      link.onload = resolve;
      document.head.appendChild(link);
    });
  };

  const loadResources = async () => {
    const promises: Promise<any>[] = [];

    for (const jsSrc of js) {
      promises.push(loadScript(jsSrc));
    }

    for (const cssHref of css) {
      promises.push(loadStyle(cssHref));
    }

    await Promise.all(promises);
  };

  await loadResources();
}

export async function loadSwiperLib() {
  if (!window.Swiper) {
    await loadJsCss({
      css: ["https://unpkg.com/swiper@8.4.7/swiper-bundle.css"],
      js: ["https://unpkg.com/swiper@8.4.7/swiper-bundle.js"],
    });
  }
  return window.Swiper;
}

调用方式:

onMounted(async () => {
const Swiper = await loadSwiperLib();
let swiper = new Swiper(".mySwiper", {...})
})

其他补充

window.Swiper在ts环境下可能会报错找不到，需要添加个evn.d.ts定义下

declare module "@wangeditor/editor-for-vue";

interface Window {
  Swiper: any;
}

采用正常vue方式引入swiper的一些参考：

Nuxt.js 3.x 套件應用－Swiper 製作輪播動畫 - Claire's Notes

Swiper · Nuxt Modules 

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发