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

背景

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

方式一

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

{{ie9 /resources/js/history.min.js}} // 暴力引入

缺点：

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

方式二

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

import { xxx } from '../js/xxx.js' //注意路径

缺点：

下载的本地静态文件才可以，远程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。

function loadJs(src) {return new Promise((resolve,reject)=>{let script = document.createElement('script');script.type = "text/javascript";script.src= src;document.body.appendChild(script);script.onload = ()=>{resolve();}script.onerror = ()=>{reject();}})} export default loadJs

使用方式：

import loadJs from './loadJs' export default {mounted(){loadJs('http://api.map.baidu.com/xxx.js').then(()=>{// 加载成功，进行后续操作})}}

方式六

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

包装一个importJs.js插件。

// 导入外部jsimport 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使用的地方

https://zhuanlan.zhihu.com/p/379504188