Vue组件中如何引入外部的js文件？

您所在的位置：网站首页 › 外部javascript的链接 › Vue组件中如何引入外部的js文件？

Vue组件中如何引入外部的js文件？

2023-04-13 21:24| 来源: 网络整理| 查看: 265

这是我参与更文挑战的第5天，活动详情查看：更文挑战

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。

以下正文：

背景

在Vue中，通常我们引入一个js插件都是使用npm 方式下载然后import使用的。但是我现在本地有了js文件或者是一个远程js文件链接，我不想使用npm install xxx 的方式，有什么办法吗？

方式一

简单粗暴，直接在Vue项目的index.html 中使用全局的方式引入，比如：

帮BOSS | 测评 {{ie9 /resources/js/history.min.js}} // 暴力引入复制代码

缺点：不使用该js插件的组件也会加载，而我只想在某个Vue组件中使用该js插件。

方式二

如果是下载到本地的静态文件，可以使用import 的方式导入。

import { xxx } from '../js/xxx.js' //注意路径复制代码

缺点：下载的静态文件才可以

方式三

在Vue组件加载完后，手动操作DOM插入js插件。

export default { mounted() { let script = document.createElement('script'); script.type = 'text/javascript'; script.src = '你的js文件地址'; document.body.appendChild(script); }, } 复制代码

该方式直接操作DOM，只在当前组件插入js插件。

方式四

使用render方法

export default { components: { 'xxx-js': { render(createElement) { return createElement( 'script', { attrs: { type: 'text/javascript', src: '你的js文件地址', }, }, ); }, }, }, } // 使用在页面中调用复制代码方式五

高阶玩法。将方式三包装成一个js插件，使用 Promise，js加载成功，调用resolve，js加载失败，调用reject。

使用的时候：

import loadJs from '../../utils/base/loadJs' export default { mounted(){ loadJs('http://api.map.baidu.com/xxx.js').then(()=>{ // 加载成功，进行后续操作 }) } } 复制代码方式六

更高阶方式。可以动态替换要加载的js文件。

包装一个importJs.js 插件。

// 导入外部js import Vue from 'vue' Vue.component('remote-script', { render: function (createElement) { var self = this; return createElement('script', { attrs: { type: 'text/javascript', src: this.src }, on: { load: function (event) { self.$emit('load', event); }, error: function (event) { self.$emit('error', event); }, readystatechange: function (event) { if (this.readyState == 'complete') { self.$emit('load', event); } } } }); }, props: { src: { type: String, required: true } } }); 复制代码

使用方式：

// 引入 import 'common/importJs.js' // html使用的地方复制代码

（完）

Vue组件中如何引入外部的js文件？

Vue组件中如何引入外部的js文件？

今日新闻

推荐新闻