vue项目中引入外部资源js

JavaScript028

vue项目中引入外部资源js,第1张

mounted() {

  const s = document.createElement('script')

  s.type = 'text/javascript'

  s.src = '你的需要的js文件地址'

  document.body.appendChild(s)

}

export default {

  components: {

    'remote-js': {

      render(createElement) {

        return createElement(

          'script',

          {

            attrs: {

              type: 'text/javascript',

              src: '你的需要的js文件地址',

            },

          },

        )

      },

    },

  },

}

目前项目有个需求就是,在vue页面中引入额外的config.js。常规引入有以下几种方法:

1.main.js直接引用

2.index.html中标签引用

3.import引入

以上不符合我们业务需求,所以整理了第四种方式:通过组件,定义为script标签引入外部js

4.1-这个写法不太便于理解,我没有使用

4.2-我使用的方法

使用:

能看到已经被加载:

给个点击事件输出一下看看

完美