Vue2 Vue Cli项目全局引入自定义库失败，求解决方法

Hey there! Let's troubleshoot why your custom library isn't loading globally and fix it properly. The issues you're facing with <script> in index.html and dynamic script creation in main.js's created hook usually boil down to loading timing or incorrect initialization order. Here's how to get it working:

Why Your Previous Approaches Failed #

1. index.html script not working: If you added the script after Vue's initialization, your library might load too late (after Vue components start rendering). Or the path to your library could be incorrect (common with assets in the public folder).
2. created hook dynamic script: The created hook runs after the Vue instance is created, but components may already be trying to use the library before it finishes loading. Plus, initializing Vue synchronously while loading the script asynchronously creates a race condition.

Solution 1: Import via npm (Recommended if Possible) #

If your custom library is available as an npm package or ES module, this is the cleanest approach:

1. Install the library (if not already done):

   npm install your-custom-library --save
   

2. In main.js, import the library, initialize it (with your credentials), and mount it to Vue's prototype so all components can access it:

   import Vue from 'vue'
   import App from './App.vue'
   import CustomLibrary from 'your-custom-library'
   
   // Initialize the library with your backend credentials
   CustomLibrary.init({
     apiToken: 'your-auth-token',
     baseURL: 'https://your-backend.com'
   })
   
   // Make it globally accessible via `this.$customLib` in all components
   Vue.prototype.$customLib = CustomLibrary
   
   new Vue({
     render: h => h(App)
   }).$mount('#app')
   

3. Use it in any component:

   export default {
     methods: {
       sendEvent() {
         this.$customLib.sendEvent('user-action', { data: 'example' })
         // Then make your HTTP request using the library's context
       }
     }
   }
   

Solution 2: Load via Script Tag (For UMD/Global Variable Libraries) #

If your library only works via a global <script> tag (e.g., UMD format), fix the loading order and timing:

Option A: Load in index.html (With Correct Order) #

Place your library's script before Vue's script in public/index.html to ensure it loads first:

<!-- public/index.html -->
<head>
  <!-- Load your custom library first -->
  <script src="/path/to/your-library.js"></script>
  <!-- Vue will load next -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
  <div id="app"></div>
  <!-- Built files will be auto injected -->
</body>

Then in main.js, access the global variable and mount it to Vue's prototype:

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

// Access the library's global variable (adjust to match your library's exposed name)
const CustomLibrary = window.CustomLibrary

// Initialize with credentials
CustomLibrary.setCredentials('your-token')

Vue.prototype.$customLib = CustomLibrary

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

Note: If your library is in the public folder, use a root path (/your-library.js) instead of a relative path to avoid 404 errors.

Option B: Dynamic Script Loading (Controlled Timing) #

If you need to load the library asynchronously (e.g., conditionally), use a Promise to ensure it loads before initializing Vue:

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

function loadCustomLibrary() {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = '/path/to/your-library.js' // Use CDN or public folder path
    script.onload = () => resolve(window.CustomLibrary) // Resolve with the global variable
    script.onerror = err => reject(new Error(`Failed to load library: ${err.message}`))
    document.head.appendChild(script)
  })
}

// Load library first, then initialize Vue
loadCustomLibrary().then(customLib => {
  customLib.init({ credentials: 'your-auth-details' })
  Vue.prototype.$customLib = customLib

  new Vue({
    render: h => h(App)
  }).$mount('#app')
}).catch(err => {
  console.error(err)
  // Handle error (e.g., show fallback UI)
})

Key Tips to Avoid Issues #

• Double-check paths: For assets in public, always use root paths (/file.js) since the folder maps to the dist root.
• Confirm global variable name: Make sure your library exposes a global variable on window (check the library's docs or source code).
• Initialize before use: Always run any setup/init methods for the library before mounting it to Vue's prototype or using it in components.

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