Vue组件中如何引入外部远程js文件或非模块规范js文件

2022年09月15日 阅读1131次 分类:开发 标签:vue微码教程

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1923.html

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

方法1

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

<!DOCTYPE html>
<html>
<head>
    <!-- ... 省略-->
</head>
<body>
    <div id="app"></div>
</body>
<script src="../xxx.js"></script> // 引入
</html>

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

方法2

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

import { xxx } from '路径'

缺点:必须可以下载静态文件才可以,比如引入高德地图就不行。

方法3

在Vue组件加载完后,手动操作DOM插入js插件。

export default {
    mounted() {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '你的js文件地址';
        document.body.appendChild(script);
    },
}

该方式直接操作DOM,只在当前组件插入js插件。

缺点:如果插件有异步操作就不行了。

方法4

使用render方法

export default {
    components: {
        'xxx-js': {
            render(createElement) {
                return createElement(
                    'script',
                    {
                        attrs: {
                            type: 'text/javascript',
                            src: '你的js文件地址',
                        },
                    },
                );
            },
        },
    },
}

使用方式

// 组件方式在页面中调用
<xxx-js></xxx-js>

方法5

高阶玩法。将方式三包装成一个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 '../../utils/base/loadJs'
   
export default {
    mounted(){
        loadJs('http://api.map.baidu.com/xxx.js').then(()=>{
            // 加载成功,进行后续操作
        })
    }
}

方法6

更高阶方式。可以动态替换要加载的js文件。包装一个importRemoteJs.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.$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/importRemoteJs.js'

// html使用的地方
<remote-script src="js文件路径" @load=""></remote-script>

(本篇完)

是不是学到了很多?可以

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1923.html