修改youtube的加载方式, 在组件中加载youtube组件, 修改nft和gameplay的路由加载方式

src/components/gameplay/VideoSection.vue

@@ -4,7 +4,7 @@
     <div class="video-cover">
       <img src="@/assets/202202/gameplay/video.jpg" alt="video">
     </div>
-    <youtube
+    <you-tube-player
       v-show="videoShow"
       class="video-youtube-202202"
       :class="{'mobile': mobile}"
@@ -14,17 +14,19 @@
       :player-height="videoHeight"
       @ready="videoReady"
       @ended="videoEnded"
-    ></youtube>
+    ></you-tube-player>
     <div class="play-btn" @click="showVideo" v-show="!videoShow"></div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { AppModule, DeviceType } from '@/store/modules/app'
+import Youtube, { YouTubePlayer } from 'vue-youtube-embed'
 
 @Component({
   name: 'VideoSection',
   components: {
+    YouTubePlayer
   }
 })
 export default class extends Vue {
@@ -39,6 +41,10 @@ export default class extends Vue {
     controls: 0
   }
 
+  beforeMount() {
+    Youtube.install(Vue)
+  }
+
   mounted() {
     // {375, 146}
     const winWidth = window.innerWidth

src/components/main/GamePlaySection.vue

@@ -17,15 +17,15 @@
     <div class="bottom-cover"></div>
     <div class="video-bg" v-show="videoShow" @click="hideVideo"></div>
     <div class="video-div" ref="videoDiv" v-show="videoShow" >
-      <youtube
+<!--      <youtube-->
-        class="video-youtube"
+<!--        class="video-youtube"-->
-        video-id="_SZ5pVCxmro"
+<!--        video-id="_SZ5pVCxmro"-->
-        :player-vars="playerVars"
+<!--        :player-vars="playerVars"-->
-        :player-width="videoWidth"
+<!--        :player-width="videoWidth"-->
-        :player-height="videoHeight"
+<!--        :player-height="videoHeight"-->
-        @ready="videoReady"
+<!--        @ready="videoReady"-->
-        @ended="videoEnded"
+<!--        @ended="videoEnded"-->
-      ></youtube>
+<!--      ></youtube>-->
     </div>
   </section>
 </template>

src/components/main/VideoSection.vue

@@ -1,6 +1,6 @@
 <template>
   <section id="video_section" ref="videoSection" data-anchor="video">
-    <youtube
+    <you-tube-player
       class="video-youtube"
       video-id="_SZ5pVCxmro"
       :player-vars="playerVars"
@@ -8,17 +8,18 @@
       :player-height="videoHeight"
       @ready="videoReady"
       @ended="videoEnded"
-    ></youtube>
+    ></you-tube-player>
   </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import Youtube, { YouTubePlayer } from 'vue-youtube-embed'
 
 @Component({
   name: 'VideoSection',
   components: {
-
+    YouTubePlayer
   }
 })
 export default class extends Vue {
@@ -37,6 +38,8 @@ export default class extends Vue {
   }
 
   beforeMount() {
+    console.log('11')
+    Youtube.install(Vue)
     window.addEventListener('resize', this.resizeHandler)
   }
 

src/main.ts

@@ -5,13 +5,11 @@ import 'element-ui/lib/theme-chalk/index.css'
 import router from './router'
 import store from './store'
 import VueClipboard from 'vue-clipboard2'
-import VueYouTubeEmbed from 'vue-youtube-embed'
 
 // Vue.use(ElementUI)
 Vue.use(Loading.directive)
 Vue.use(Slider)
 
-Vue.use(VueYouTubeEmbed)
 Vue.use(VueClipboard)
 Vue.config.productionTip = false
 

src/router/index.ts

@@ -6,7 +6,6 @@ import Item from '../views/desktop/Item.vue'
 import MyNft from '@/views/desktop/MyNft.vue'
 import Index from '@/views/desktop/Index.vue'
 import Presale from '@/views/desktop/Presale.vue'
-import NFT from '@/views/desktop/NFT.vue'
 import Gameplay from '@/views/desktop/Gameplay.vue'
 import Tokenomic from '@/views/desktop/Tokenomic.vue'
 import Team from '@/views/desktop/Team.vue'
@@ -15,7 +14,6 @@ import MobileIndex from '@/views/mobile/Index.vue'
 import { AppModule, DeviceType } from '@/store/modules/app'
 import { isMobile } from '@/utils/resize'
 import MobileGameplay from '@/views/mobile/Gameplay.vue'
-import MobileNft from '@/views/mobile/NFT.vue'
 import MobileTokennomic from '@/views/mobile/Tokenomic.vue'
 import MobileTeam from '@/views/mobile/Team.vue'
 import MobileRoadmap from '@/views/mobile/Roadmap.vue'
@@ -77,7 +75,8 @@ const routes: Array<RouteConfig> = [
   {
     path: '/nft',
     name: 'Nft',
-    component: mobile ? MobileNft : NFT,
+    // component: mobile ? MobileNft : NFT,
+    component: resolve => mobile ? require(['@/views/mobile/NFT.vue'], resolve) : require(['@/views/desktop/NFT.vue'], resolve),
     alias: '/nft/index.html',
     meta: {
       title: 'NFT | CEBG: CRYPTO ELITE‘S BATTLEGROUNDS',
@@ -96,7 +95,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/gameplay',
     name: 'Gameplay',
-    component: mobile ? MobileGameplay : Gameplay,
+    component: resolve => mobile ? require(['@/views/mobile/Gameplay.vue'], resolve) : require(['@/views/desktop/Gameplay.vue'], resolve),
     alias: '/gameplay/index.html',
     meta: {
       title: 'Gameplay | CEBG: CRYPTO ELITE‘S BATTLEGROUNDS',