1.npm安装easyplayer、copy-webpack-plugin
代码语言:javascript复制npm install @easydarwin/easyplayer --save
npm install [email protected] --save-dev
也可在package.json文件中直接添加版本号,然后执行yarn install 或 npm install:
代码语言:javascript复制"dependencies": {
"@easydarwin/easyplayer": "^5.0.3",
},
"devDependencies": {
"copy-webpack-plugin": "^4.0.1",
}
2.在vue.config.js文件中配置
代码语言:javascript复制const CopyWebpackPlugin = require('copy-webpack-plugin')
...
new CopyWebpackPlugin([
{ from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm' },
{ from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml' },
{ from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js', to: 'js/' },
])
3.在public/index.html中引入js静态资源注意:文件位置要与上面配置的to...相同,上面配置是的 to: 'js/',所以底下地址是./js
代码语言:javascript复制<!--引入EasyPlayer依赖-->
<script src="./js/EasyPlayer-lib.min.js"></script>
或
<script src="<%= BASE_URL %>js/EasyPlayer-lib.min.js"></script>
4.在vue中使用
代码语言:javascript复制<easy-player :video-url="item.videoUrl" :live="true"></easy-player>
...
import EasyPlayer from '@easydarwin/easyplayer'
...
components: { EasyPlayer }