vue项目中引入外部资源js

JavaScript017

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-我使用的方法

使用:

能看到已经被加载:

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

完美

1、vue-cli webpack全局引入jquery

(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。)

(2)在webpack.base.conf.js里加入

1

var webpack = require("webpack")

(3)在module.exports的最后加入

1234567

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]

(4) 在main.js 引入就ok了(测试这一步不用也可以)

1

import $ from 'jquery'

(5)然后 npm run dev 就可以在页面中直接用$ 了.