vue踩坑填坑(一):引入模块组件（Vue组件中如何引入外部的js文件）

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

背景

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


     


     


     

，我不想使用npm install xxx 的方式


 




 




 




，有什么办法吗？

方式一

简单粗暴   

   

   

  ，直接在Vue项目的index.html 中使用全局的方式引入   

     

     

     
，比如： <title>测评</title> <link type="text/css" href="//at.alicdn.com/t/font_43459_d124thd3lgu.css" rel="stylesheet"> {{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 插件


















。

// 导入外部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.KaTeX parse error: Expected EOF, got } at position 30: …vent); }̲, error…

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使用的地方

（完）