Vue如何引入外部js文件(适用vue-cli 2.0)

3,890 阅读1分钟

vue项目中直接引入在index.html引入static中的js文件往往会报错,如下图:

故解决方法如下:

1、在main.js中写入如下代码:

  import Vue form 'vue'
    Vue.component(‘external-script’,{
	    render :function(createElement){
		    var _this = this;
	        return  createElement(‘script’,{
	            attrs:{
	                type:'text/javascript',
	                src:this.src
                },
                on:{
	                load:function(event){
	                _this.$emit(‘load’,event);
                    },
                    error:function(event){
	                _this.$emit(‘error’,event);
                    },
                    readystatechange:function(event){
	                    if(this.readyState ==’complete’){
	                    _this.$emit(‘load’,event);
                        }
                    }
                }
            });
        },
        props:{
	        src:{
                type:String,,
                required:true
            }
        }
    })

2、vue项目文件中引入

<external-script src=”引入外部文件名”></ external-script>

例:

即引入成功!!!不在报次错误