使用云功能部署到Firebase主机后，滚动插件的动画在Nuxt版本2中不起作用

Question

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

下面是我的plugins/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,
  })
}