vue vite ts 中 在setup 中使用 EasyPlayer-component.min.js

在Vue 3 + Vite + TypeScript的项目中，需要使用EasyPlayer-component.min.js，可以通过以下步骤实现：

1. 安装EasyPlayer-component.min.js依赖

   npm install easyplayer-component --save

2. 在Vue组件中引入EasyPlayer-component.min.js，并使用`defineAsyncComponent`来异步加载组件。

   <template>
     <div>
       <easyplayer :options="options" ref="player"></easyplayer>
     </div>
   </template>

   <script lang="ts">
   import { defineAsyncComponent, onMounted, ref } from 'vue'
   const EasyPlayer = defineAsyncComponent(() => import('easyplayer-component'))
   
   export default {
     name: 'MyComponent',
     components: { EasyPlayer },
     setup() {
       const options = ref({})
   
       onMounted(() => {
         options.value = {
           url: 'http://example.com/video.mp4',
           autoplay: true,
           width: '100%',
           height: '100%'
         }
       })
   
       return {
         options
       }
     }
   }
   </script>

3. 在Vite配置文件中添加EasyPlayer-component.min.js的CDN链接

   import { defineConfig } from 'vite'

   export default defineConfig({
     // ...
     optimizeDeps: {
       include: ['easyplayer-component']
     },
     // ...
     build: {
       rollupOptions: {
         external: ['easyplayer-component'],
         output: {
           globals: {
             'easyplayer-component': 'easyplayer'
           }
         }
       }
     }
   })

这样就可以在Vue 3 + Vite + TypeScript的项目中使用EasyPlayer-component.min.js了。注意，这里使用的是异步加载组件的方式，如果需要在模板中直接使用EasyPlayer-component.min.js，则可以使用`defineComponent`并在`mounted`中初始化。