乐闻世界logo
搜索文章和话题

How to add external js scripts to vuejs components

Vue

3个答案

1
2
3

There are several ways to add external JavaScript scripts to Vue components:

1. Directly Include with <script> Tag in index.html

Within the index.html file of your Vue project, you can add a <script> tag in the <head> or at the bottom of the <body> to include external scripts.

html
<!-- index.html -->
<script src="https://example.com/some-external-script.js"></script>

The advantage is that it loads only once globally, making the functionality accessible to all components. However, the disadvantage is that it is loaded regardless of whether the component requires it.

2. Dynamic Loading with import()

Within the component, you can use JavaScript's dynamic import (import()) to load and parse the script only when needed, supporting modular code structure.

javascript
// Vue component
export default {
  name: 'MyComponent',
  mounted() {
    import('path-to-external-script')
      .then(module => {
        // Use the loaded script
        module.someFunction();
      })
      .catch(err => {
        console.error('Failed to load the external script', err);
      });
  }
};

Using dynamic imports allows better control over when the script is loaded, enabling on-demand loading and optimizing performance.

3. Using Third-Party Libraries

Sometimes the external script might be a third-party library that can be installed via package managers such as npm or yarn and imported as a module within the component.

bash
npm install some-external-library
# or
yarn add some-external-library

Then, import and use it in the Vue component:

javascript
// Vue component
import someLibrary from 'some-external-library';

export default {
  name: 'MyComponent',
  mounted() {
    someLibrary.someFunction();
  }
};

4. Using Vue Plugins

If the external script is a Vue plugin, you can register it using Vue.use() before creating the Vue instance.

javascript
import Vue from 'vue';
import SomePlugin from 'some-vue-plugin';

Vue.use(SomePlugin);

new Vue({
  // ... configuration
});

Once registered, the plugin's functionality is typically available in all Vue components.

5. Dynamically Creating <script> Tags

Sometimes, you might need to dynamically create and add a <script> tag within the component's lifecycle.

javascript
export default {
  name: 'MyComponent',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://example.com/some-external-script.js';
    script.onload = () => {
      // Actions to perform after the script loads
    };
    document.body.appendChild(script);
  }
};

This method allows you to control script loading within the component's lifecycle, but you need to clean up to prevent memory leaks, such as removing the created script tag when the component is destroyed.

Summary

The choice of method depends on your specific needs, including global availability, on-demand loading, and dependency management. In practice, it is recommended to choose the appropriate method based on your project structure and requirements.

2024年6月29日 12:07 回复

This can be done simply as follows.

javascript
created() {
  var scripts = [
    "https://cloudfront.net/js/jquery-3.4.1.min.js",
    "js/local.js"
  ];
  scripts.forEach(script => {
    let tag = document.createElement("script");
    tag.setAttribute("src", script);
    document.head.appendChild(tag);
  });
}
2024年6月29日 12:07 回复

Using Webpack and Vue Loader, you can do the following:

It waits for the external script to load before creating the component, so global variables such as 'someComponent' are available in the component.

javascript
components: {
  SomeComponent: () => {
    return new Promise((resolve, reject) => {
      let script = document.createElement('script')
      script.onload = () => {
        resolve(import('someComponent'))
      }
      script.async = true
      script.src = 'https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places'
      document.head.appendChild(script)
    })
  }
}
,
2024年6月29日 12:07 回复

你的答案