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

How to add external js scripts to vuejs components

Vue

3个答案

1
2
3

在Vue组件中将外部JavaScript脚本添加到组件中通常有以下几种方式：

1. 使用<script>标签在index.html中直接引入

在Vue项目的入口文件index.html中，可以直接在<head>标签或者<body>标签的底部添加<script>标签来引入外部脚本。

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

这种方式的好处是全局只加载一次，所有组件都可以访问到该脚本提供的功能，但缺点是不论组件是否需要该脚本，它都会被加载。

2. 动态加载使用import()

可以在组件内使用JavaScript的动态导入（import()），这样可以在需要的时候才加载和解析脚本，还支持模块化的代码。

javascript
// Vue组件内
export default {
  name: 'MyComponent',
  mounted() {
    import('path-to-external-script')
      .then(module => {
        // 使用加载的脚本
        module.someFunction();
      })
      .catch(err => {
        console.error('Failed to load the external script', err);
      });
  }
};

使用动态导入可以更好地控制脚本加载的时机，实现按需加载，优化性能。

3. 使用第三方库

有时外部脚本可能是一个第三方库，可以通过npm或yarn这样的包管理器来安装，并在组件中以模块的方式导入。

bash
npm install some-external-library
# 或者
yarn add some-external-library

然后在Vue组件中导入使用：

javascript
// Vue组件内
import someLibrary from 'some-external-library';

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

4. 使用Vue插件

如果外部脚本是一个Vue插件，可以在Vue实例创建之前使用Vue.use()来注册插件。

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

Vue.use(SomePlugin);

new Vue({
  // ... 配置项
});

注册插件后，通常可以在所有的Vue组件中使用该插件提供的功能。

5. 动态创建<script>标签

有时，你可能需要在组件的生命周期钩子中动态创建并添加<script>标签。

javascript
export default {
  name: 'MyComponent',
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://example.com/some-external-script.js';
    script.onload = () => {
      // 脚本加载完成后执行的操作
    };
    document.body.appendChild(script);
  }
};

这种方法允许你在组件的生命周期内控制脚本的加载，但需要注意清理，防止内存泄露，如在组件销毁时移除创建的script标签。

总结

选择哪种方法取决于你的具体需求，如全局可用性、按需加载、依赖管理等。在实际开发中，推荐根据项目的结构和需求来合理安排资源的加载方式。

2024年6月29日 12:07 回复

使用 webpack 和 vue loader 你可以做这样的事情

它在创建组件之前等待外部脚本加载，因此 globar vars 等在组件中可用

shell
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 回复

这可以简单地像这样完成。

shell
  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 回复

你的答案