美文网首页
解决vue单页文件引入外部js的问题

解决vue单页文件引入外部js的问题

作者: zoomlaCMS | 来源:发表于2020-02-18 09:04 被阅读0次

    方法一

    1.在main.js中引入

    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
            }
        }
    });
    
    

    2.在所需要的引入外部js的页面使用

    src地址里面填要引入js文件的地址即可:

    <remote-script src=""></remote-script>
    

    第二则方法 :

    在普通的项目中,我们可以通过来引入外部的js文件,但是在Vue项目中,就不可以使用这种方式了,需要使用ES6语法来引入,同时还要对已有的js文件做相应的修改。
    一般情况下,我们引入外部js文件,是要调用js文件中的函数。在Vue项目中,我们首先要使用export命令将这个函数抛出,然后才能在其他的Vue组件中使用import命令引入。同时还要注意外部js脚本的存放位置,不能放在components文件夹下。

    一、修改外部js脚本

    比如有一个实现MD5加密算法的js脚本文件,代码如下:

    var MD5 = function (string) {
    
        // 这里是MD5的具体实现算法
    
    }
    
    

    如果我们在其他的Vue组件中想要引入MD5函数,那么要在MD5加密算法的js脚本的最后,使用如下代码,将MD5函数导出:

    export {
      MD5
    }
    
    

    最后还是要提示一下,这个外部脚本不要放在components文件夹下,否则会一直报错。可以在src文件夹下新建一个js文件夹,然后将外部js脚本放在这个文件夹下,然后就可以在其他Vue组件中引入该js脚本。

    二、在Vue组件中引入js组件

    在组件中使用import { 函数名 } from 外部脚本名来从外部js脚本中导入我们需要使用的函数。比如我们要从md5.js脚本中导入MD5函数,使用以下代码:

    import { MD5 } from '../js/md5'
    
    

    这样,我们就可以在这个Vue组件中正常调用MD5函数了,代码如下:

     created: function () {
        console.log(MD5("66666"));
    }
    
    

    如果引入的外部js文件不是一个函数,要把这个js用函数包起来先export出去,然后在使用import或require导入


    第三种方法

    如果要引入第三方JS或者css 最好是把文件放在statis文件夹下,此处是静态文件存放的位置

    第一种方法:

    直接在index.html中引入

    js

      <script type="text/javascript" src="static/mui.min.js" ></script>
    

    css

     <link rel="stylesheet" href="static/mui.min.css" />
    

    第二种 在单页面中用import方法导入

    js

     import mui from '../../../static/mui.min.js'
    

    css

     @import "../../common/stylus/mixin";
    

    import引入 要写好路径即可

    第三种 在mian.js中引入css,代码如下

    import 'static/css/main.css'
    

    这样就可以直接使用了

    相关文章

      网友评论

          本文标题:解决vue单页文件引入外部js的问题

          本文链接:https://www.haomeiwen.com/subject/hiiwfhtx.html