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

How to add external js scripts to vuejs components

Vue
1 年前提问
3 个月前修改
浏览次数218次

6个答案

1
2
3
4
5
6

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

解决此问题的一个简单有效的方法是将外部脚本添加到mounted()组件的 vue 中。我将用Google Recaptcha脚本向您说明：

shell
<template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>

来源： https: //medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

2024年6月29日 12:07 回复

我下载了一些带有自定义 js 文件和 jquery 的 HTML 模板。我必须将这些 js 附加到我的应用程序中。并继续使用 Vue。

在这种情况下，这个包非常适合我 https://www.npmjs.com/package/vue-plugin-load-script

shell
// local files
// you have to put your scripts into the public folder. 
// that way webpack simply copy these files as it is.
Vue.loadScript("/js/jquery-2.2.4.min.js")

// cdn
Vue.loadScript("https://maps.googleapis.com/maps/api/js")
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 回复

更新：这在 Vue 3 中不再有效。您将收到此错误：

VueCompilerError：具有副作用（ 和 ）的标签在客户端组件模板中被忽略。

如果您尝试将外部 js 脚本嵌入到 vue.js 组件模板中，请按照以下步骤操作：

我想向我的组件添加**外部 JavaScript 嵌入代码，**如下所示：

shell
<template>
  <div>
    This is my component
    <script src="https://badge.dimensions.ai/badge.js"></script>
  </div>
<template>

Vue 向我展示了这个错误：

模板应该只负责将状态映射到 UI。避免在模板中放置具有副作用的标签，例如 ，因为它们不会被解析。

我解决这个问题的方法是添加type="application/javascript"（请参阅此问题以了解有关 js 的 MIME 类型的更多信息）：

<script type="application/javascript" defer src="..."></script>

您可能会注意到该defer属性。如果您想了解更多信息，请观看Kyle 的视频

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

你的答案