无需Webpack通过CDN在Vuetify中引入vue-videobg组件报错如何解决

问题原因 #

• 脚本加载顺序错误：vuetify-video-parallax 依赖Vue和Vuetify运行，你当前将该组件的CDN引入放在head区域，早于body底部的Vue、Vuetify加载时机，导致组件初始化时找不到依赖，没有正确挂载到window对象上。
• 组件注册名与使用的标签不匹配：你当前注册的组件名为 VuetifyVideoParallax，按照Vue的组件名转换规则，对应的短横线分隔式标签应为 <v-vuetify-video-parallax>，和你代码中使用的 <v-video-parallax> 不一致，因此Vue无法识别该自定义组件。

修正方案 #

调整脚本加载顺序，同时修改组件注册名匹配你当前使用的标签即可，修正后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>Hello world</v-container>
        <v-video-parallax src="http://techslides.com/demos/sample-videos/small.mp4" img="assets/city.png" height="600">
          Some Html Here and the video is <b>normally</b> in the background...
        </v-video-parallax>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <!-- 把组件CDN移到Vue和Vuetify之后加载 -->
  <script src="https://unpkg.com/vuetify-video-parallax"></script>
  <script>
    new Vue({
      el: '#app',
      components: {
        // 修改注册名，对应你使用的<v-video-parallax>标签
        VVideoParallax: window["vuetify-video-parallax"]
      },
      vuetify: new Vuetify(),
      data() {
        return {
          "important": true,
          "is_video_parallax_work": "yes it works",
        }
      }
    })
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Samir