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页面前端开发 

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值