如何将脚本导入 .vue 文件？答案

【问题标题】：How to import a script into .vue file?如何将脚本导入 .vue 文件？
【发布时间】：2018-05-13 08:21:58
【问题描述】：

我正在尝试将播放器导入到我的 vue.js 文件中。通常我会在模板之外使用脚本文件，但这不起作用。

在一个 html 文件中，我要做的是：

 <div id="player">
    <div id="vplayer"></div>
 </div>

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>

  <script>
  var urlsrc = "http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8";
  var player = new Clappr.Player({source: urlsrc, parentId: "#vplayer", height: 240, width: 320});
  </script>

在 vue.js 中，我尝试使用以下返回码做同样的事情，但它不起作用：

     <template>
      <div id="player">
         <div id="vplayer"></div>
       </div>
     </template>

<script>

export default {

  name: 'player',
  data () {
    return {
      script: 'https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js',
      url: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
      player: new Clappr.Player({source: this.url, parentId: "#vplayer", height: 240, width: 320})
    }
  }
}
</script>

我收到一条错误消息，提示播放器未定义。如何让普通脚本在 vue.js 中运行？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您应该使用Mixins。制作自己的 mixin，然后将导入脚本中的方法添加到 mixin 的方法部分。

  var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

【讨论】：

【解决方案2】：

一种可能的解决方案是在created() 挂钩中添加外部脚本并使用脚本onload 方法

    <template>
      .... your HTML
    </template>

    <script>
    export default {
        data: () => ({
            url: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
            player: null
        }),
        created() {
            let clapprScript = document.createElement('script')
            clapprScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js')
            clapprScript.onload = this.initPlayer;
            document.head.appendChild(clapprScript)
        },
        methods: {
            initPlayer() {
                this.player = new Clappr.Player({
                    source: this.url,
                    parentId: "#vplayer",
                    height: 240,
                    width: 320
                })
                console.log('Player is loaded')
            }
        }
    }
    </script>

【讨论】：

【解决方案3】：

在使用 npm 安装 Clappr 后，您应该能够做到这一点：

<script>
  import Clappr from 'clappr';
  export default {
      created() {
          let player = Clappr.Player({...});
      }
  }
</script>

通过这种方式，您可以在 Vue 组件中初始化您的 clappr 实例，就像在 vanilla html、js 场景中一样。

【讨论】：