Vue.js导入fullPageScrollPureJS模块报错：TypeError: not a constructor

Hey there, let's work through that TypeError: this.$FullScroll is not a constructor error you're hitting. I've dealt with similar vanilla JS library integration quirks in Vue before, so here's what's likely going wrong and how to fix it:

Why This Happens #

The root issue is that whatever you're mounting to Vue.prototype.$FullScroll isn't actually the constructor function from the fullPageScrollPureJS library. This usually happens because:

• The library exposes its constructor via window instead of ES module exports
• You're importing the library incorrectly (grabbing an object wrapper instead of the direct constructor)
• The library's export structure doesn't match how you're trying to import it

Step-by-Step Fixes #

1. First, Check the Library's Export Structure

Open the fullPageScrollPureJS.js file you placed in your assets folder and look for how it exposes the constructor. You'll likely see one of these patterns:

• It attaches the constructor to the global window object:
  window.FullScroll = function(options) { /* ... */ }
• It uses ES module default export:
  export default function FullScroll(options) { /* ... */ }
• It uses ES module named export:
  export function FullScroll(options) { /* ... */ }

2. Correctly Import and Mount the Constructor

Based on what you found in step 1, adjust your main.js code:

Case 1: Library uses window global

import Vue from 'vue'
import App from './App.vue'

// Import the script to load it into the window context
import '@/assets/fullPageScrollPureJS.js'

// Mount the window-bound constructor to Vue's prototype
Vue.prototype.$FullScroll = window.FullScroll

// Or use Object.defineProperty if you need more control
// Object.defineProperty(Vue.prototype, '$FullScroll', {
//   value: window.FullScroll,
//   enumerable: true,
//   configurable: true
// })

new Vue({
  render: h => h(App)
}).$mount('#app')

Case 2: Library uses ES module default export

import Vue from 'vue'
import App from './App.vue'
import FullScroll from '@/assets/fullPageScrollPureJS.js'

Vue.prototype.$FullScroll = FullScroll

new Vue({
  render: h => h(App)
}).$mount('#app')

Case 3: Library uses ES module named export

import Vue from 'vue'
import App from './App.vue'
import { FullScroll } from '@/assets/fullPageScrollPureJS.js'

Vue.prototype.$FullScroll = FullScroll

new Vue({
  render: h => h(App)
}).$mount('#app')

3. Fix Instance Timing (Bonus)

While your current error is about the constructor, you might run into a secondary issue: trying to instantiate the scroll library before the DOM is ready. Move your LaunchFP call to the mounted hook instead of created (since created runs before the DOM is rendered):

<template>
  <main>
    <!-- Your scrollable sections go here -->
  </main>
</template>

<script>
export default {
  mounted() {
    this.LaunchFP()
  },
  methods: {
    LaunchFP() {
      try {
        new this.$FullScroll({
          mainElement: "main",
          displayDots: true,
          dotsPosition: "left",
          animateTime: 0.7,
          animateFunction: "ease"
        })
      } catch (err) {
        console.error('FullScroll init failed:', err)
      }
    }
  }
}
</script>

Quick Debug Tip #

If you're still unsure what you're importing, add a console.log in main.js right after importing to check:

import FullScroll from '@/assets/fullPageScrollPureJS.js'
console.log(FullScroll) // Should show a function (the constructor)

内容的提问来源于stack exchange，提问作者Fanna1119