Vue.js 2结合Webpack如何引入CDN第三方JavaScript库

Got it, I totally get your predicament here—some third-party libraries only provide CDN links, no npm packages, and you can’t host a local copy because you need the always-updated version. Let’s walk through a few practical ways to load such libraries in your Vue.js 2 + Webpack project:

1. Global Load via index.html #

If the library is used across multiple components in your app, adding the script directly to your root index.html (usually in the public folder for Vue CLI projects) is the simplest approach.

Just drop the script tag in either the <head> or right before closing </body>—using async defer ensures it loads without blocking your page:

<!-- public/index.html -->
<head>
  <!-- ... other head content ... -->
  <script async defer src="https://apis.google.com/js/api.js"></script>
</head>

Important note: Since the script loads asynchronously, you need to make sure the library is ready before using it in your components. You can either:

• Listen for the window.onload event, or
• Check if the global variable (like window.gapi for Google's API) exists in your component's mounted hook before running related code:

  mounted() {
    if (window.gapi) {
      this.initLibrary()
    } else {
      // Fallback: Wait for the library to load
      window.addEventListener('load', () => this.initLibrary())
    }
  },
  methods: {
    initLibrary() {
      // Your code using the library goes here
      gapi.load('client', () => { /* ... */ })
    }
  }
  

2. Dynamic Script Loading in Specific Components #

If the library is only used in one or two components, dynamically injecting the script directly in those components keeps your global scope clean and saves unnecessary network requests for other parts of the app.

Here’s how to do it in a component:

export default {
  mounted() {
    // Avoid reloading the library if it's already loaded
    if (!window.gapi) {
      const script = document.createElement('script')
      script.src = 'https://apis.google.com/js/api.js'
      script.async = true
      script.defer = true
      
      // Run your code once the script loads
      script.onload = () => this.initLibrary()
      
      // Handle loading errors (optional but recommended)
      script.onerror = () => console.error('Failed to load the library')
      
      document.head.appendChild(script)
    } else {
      // Library is already available, initialize immediately
      this.initLibrary()
    }
  },
  methods: {
    initLibrary() {
      // Use the library here
      gapi.load('client', () => { /* ... */ })
    }
  },
  // Optional: Clean up if needed when the component is destroyed
  beforeDestroy() {
    const script = document.querySelector('script[src="https://apis.google.com/js/api.js"]')
    if (script) {
      document.head.removeChild(script)
      delete window.gapi // Clear the global variable if desired
    }
  }
}

3. Wrap it in a Vue Plugin (For Cross-Component Use) #

If multiple components need the library, wrapping the loading logic into a Vue plugin ensures it’s loaded only once and makes it easily accessible across your app.

First, create a plugin file (e.g., src/plugins/externalLibrary.js):

export default {
  install(Vue) {
    // Return a promise to handle async loading
    return new Promise((resolve, reject) => {
      if (window.gapi) {
        resolve(window.gapi)
        return
      }

      const script = document.createElement('script')
      script.src = 'https://apis.google.com/js/api.js'
      script.async = true
      script.defer = true

      script.onload = () => resolve(window.gapi)
      script.onerror = () => reject(new Error('Failed to load external library'))

      document.head.appendChild(script)
    }).then(library => {
      // Mount the library to Vue's prototype for easy access
      Vue.prototype.$externalLib = library
      // Optional: Pre-initialize the library here if needed
      // library.load('client', () => { /* ... */ })
    })
  }
}

Then register the plugin in your main.js:

import Vue from 'vue'
import ExternalLibraryPlugin from './plugins/externalLibrary'

Vue.use(ExternalLibraryPlugin)

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

Now you can use it in any component like this:

export default {
  async mounted() {
    // Wait for the library to be ready (if pre-initialized, you might not need this)
    await this.$externalLib.load('client')
    // Your library logic here
  }
}

Pick the approach that fits your use case best—global load for app-wide usage, dynamic loading for component-specific needs, or a plugin for clean cross-component access.

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