firebase - 使用云功能部署到 Firebase 托管后，滚动插件上的动画在 Nuxt 版本 2 中不起作用

Question

我在我的 Nuxt.js 站点中通过 npm 使用滚动库上的动画。当我将它添加到我的 plugins/aos.js 并在 nuxt.config.js 插件中配置它时，它工作得很好。但是当我尝试使用云功能部署到 Firebase 托管时，它不起作用。

这是我的插件/aos.js 文件

 import AOS from "aos";
 
 import "aos/dist/aos.css";
 
 export default ({ app }) = {   app.AOS = new AOS.init({ disable:
 "phone" }); };

这是我的 nuxt.config.js 文件

 export default {   mode: "universal",
 
   head: {
     title: process.env.npm_package_name || "",
     meta: [
       { charset: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },
       {
         hid: "description",
         name: "description",
         content: process.env.npm_package_description || ""
       }
     ],
     link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]   },
      loading: { color: "#fff" },
      css: [],
     plugins: [{ src: "@/plugins/aos", mode: "server" }],
     buildModules: [],
     modules: ["@nuxtjs/vendor"],
      buildDir: "../functions/nuxt",   build: {
     publicPath: "/",
     extractCSS: true,
    
     extend(config, ctx) {}   } };

Answer 1

可能是因为SSR。我自己也搞定了。

重命名aos.js为aos.client.js以确保它仅在客户端上加载。

在那个文件中我有

import AOS from 'aos'

export default ({ app }) => {
  app.AOS = AOS.init({
    offset: 250,
    once: true,
  })
}