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

（完）