關鍵依賴：在nuxt專案中需要函式

在我的 nuxt 專案中使用包scrollMonitor 時，我收到“關鍵依賴：require 函式的使用方式無法靜態提取依賴項，友好錯誤 16:21:14”錯誤

plugins/scroll-monitor.js

import Vue from 'vue';
// your imported custom plugin or in this scenario the 'vue-session' plugin
import ScrollMonitor from 'scrollmonitor';

Vue.use(ScrollMonitor);

nuxt.config.js

plugins: [
  '~/plugins/wordpress-api',
  { src: '~/plugins/scroll-monitor.js', ssr: false }

],

build: {
  /*
  ** You can extend webpack config here
  */
 vendor: ['scrollmonitor'],
  extend(config, ctx) {
  }
}

在我的 index.vue 檔案中

let scrollmonitor
if (process.client) {
  scrollmonitor = require('scrollmonitor')
}

更多背景

還是行不通。
我正在使用新電腦，在我的舊電腦上一切正常。

index.vue

<template>
  <div class="index page-padding-top">
    <TheHero
      :scaledUpDot="scaledUpDot"
      :isFirstImageVisible="isFirstImageVisible"
    />
    <ProjectsList :projects="projects" />
  </div>
</template>



<script>
import { mapGetters } from "vuex";

import TheHero from "~/components/TheHero";
import ProjectsList from "~/components/ProjectsList";

export default {
  async mounted () {
    if (process.browser) {
      const scrollMonitor = await import('scrollmonitor')
      Vue.use(scrollMonitor)
      console.log('HELLO FROM MOUNTED')
    }
  },
  name: "Index",
  components: { TheHero, ProjectsList},
  data() {
    return {
      scaledUpDot: false,
      isFirstImageVisible: false,
    };
  },
  computed: {
    ...mapGetters({
      projects: "getProjects",
    }),
  },
  mounted() {
    this.handleScaling();
    this.hideScrollSpan();
  },
  destroyed() {
    this.handleScaling();
    this.hideScrollSpan();
  },
  methods: {
    handleScaling() {
      if (process.client) {
        const heroSection = document.querySelectorAll(".hero");
      const heroSectionWtcher = scrollMonitor.create(heroSection, 0);
      heroSectionWtcher.enterViewport(() => {
        this.scaledUpDot = true;
      });
      }
     
    },
    hideScrollSpan() {
      if (process.client) {
        const images = document.querySelectorAll(".projects-home img");
        const firstImage = images[0];
        const imageWatcher = scrollMonitor.create(firstImage, -30);
        imageWatcher.enterViewport(() => {
          this.isFirstImageVisible = true;
        });
      }
    },
  },
};
</script>

在我的舊電腦中，我是這樣匯入的：

import { mapGetters } from 'vuex'
import scrollMonitor from 'scrollmonitor'

但是當我想在一個新的中運行它時，我收到一個錯誤，即視窗未定義

所以我開始以其他方式添加這個插件，但仍然無法正常作業

uj5u.com熱心網友回復：

還是行不通。
我正在使用新電腦，在我的舊電腦上一切正常。

index.vue

<template>
  <div class="index page-padding-top">
    <TheHero
      :scaledUpDot="scaledUpDot"
      :isFirstImageVisible="isFirstImageVisible"
    />
    <ProjectsList :projects="projects" />
  </div>
</template>



<script>
import { mapGetters } from "vuex";

import TheHero from "~/components/TheHero";
import ProjectsList from "~/components/ProjectsList";

export default {
  async mounted () {
    if (process.browser) {
      const scrollMonitor = await import('scrollmonitor')
      Vue.use(scrollMonitor)
      console.log('HELLO FROM MOUNTED')
    }
  },
  name: "Index",
  components: { TheHero, ProjectsList},
  data() {
    return {
      scaledUpDot: false,
      isFirstImageVisible: false,
    };
  },
  computed: {
    ...mapGetters({
      projects: "getProjects",
    }),
  },
  mounted() {
    this.handleScaling();
    this.hideScrollSpan();
  },
  destroyed() {
    this.handleScaling();
    this.hideScrollSpan();
  },
  methods: {
    handleScaling() {
      if (process.client) {
        const heroSection = document.querySelectorAll(".hero");
      const heroSectionWtcher = scrollMonitor.create(heroSection, 0);
      heroSectionWtcher.enterViewport(() => {
        this.scaledUpDot = true;
      });
      }
     
    },
    hideScrollSpan() {
      if (process.client) {
        const images = document.querySelectorAll(".projects-home img");
        const firstImage = images[0];
        const imageWatcher = scrollMonitor.create(firstImage, -30);
        imageWatcher.enterViewport(() => {
          this.isFirstImageVisible = true;
        });
      }
    },
  },
};
</script>

在我的舊電腦中，我是這樣匯入的：

import { mapGetters } from 'vuex'
import scrollMonitor from 'scrollmonitor'

但是當我想在一個新的中運行它時，我收到一個錯誤，即視窗未定義

所以我開始以其他方式添加這個插件，但仍然無法正常作業

uj5u.com熱心網友回復：

在我的舊電腦中，我是這樣匯入的：

<script>

import { mapGetters } from "vuex";
import scrollMonitor from 'scrollmonitor'

但是當我想在一個新的中運行它時，我收到一個錯誤，即視窗未定義

所以我開始以其他方式添加這個插件，但仍然無法正常作業

標籤：Vue.js nuxt.js

上一篇：vuejs2--使用帶有訊息資料的v-html

下一篇：Nuxt應用程式-客戶端和服務器檔案分離-如何部署到Heroku？