如何在.vue文件中引入外部js

JavaScript022

如何在.vue文件中引入外部js,第1张

Vue 的 createElement 方法，简单的封装一个组件解决问题。

解决方法

第一版代码（直接在操作 Dom ）如下：

export default {

mounted() {

const s = document.createElement('script')

s.type = 'text/javascript'

s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js'

document.body.appendChild(s)

},

}

使用 createElement 方法：

export default {

components: {

'dingtalk': {

render(createElement) {

return createElement(

'script',

{

attrs: {

type: 'text/javascript',

src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',

},

},

)

},

},

},

}

// 使用在页面中调用

终极方案

通过封装一个组件 remote-js 实现：

export default {

components: {

'remote-js': {

render(createElement) {

return createElement('script', { attrs: { type: 'text/javascript', src: this.src }})

},

props: {

src: { type: String, required: true },

},

},

},

}

使用方法：

<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">remote-js>

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

1.main.js直接引用

2.index.html中标签引用

3.import引入

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

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

4.2-我使用的方法

使用：

能看到已经被加载：

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

完美

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文件地址',

            },

          },

        )

      },

    },

  },

}