vue文件里面怎么引用外部的js文件

JavaScript021

vue文件里面怎么引用外部的js文件,第1张

步骤:

首先。我们要改造我们要映入的外部js文件,改成下面这个格式。主要是红色方块内部代码,我们需要将我们的模块“抛出”,让人能获取到以下及相应代码:

其次,到我们的寄主那里,我们需要导入,仿造其他的文件,写法如下及相应代码:

注意红色叉的部分,那是我们es5的写法,绿色才是正确的;接着是效果图:

其他方法:直接@import就行了

<style>

@import "../../scss/retinaLine"

@import "../../scss/css3Module"

...

</style>

目前项目有个需求就是,在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文件地址',

            },

          },

        )

      },

    },

  },

}