依赖:npm install photo-sphere-viewer --save-dev

代码：

<template><div class="demo-container"><!-- 测试 --><div id="viewer"></div></div>
</template><script>
import { Viewer } from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";export default {data() {return {viewer: "",img: "https://img0.baidu.com/it/u=2063349374,2152739293&fm=253&fmt=auto&app=138&f=JPEG?w=843&h=500",};},mounted() {this.getViewer();},methods: {getViewer() {this.viewer = new Viewer({container: document.getElementById("viewer"),panorama: this.img,size: {width: "886px",height: "554px",},// size: {//   width: screen.availWidth,//   height: screen.availHeight, //  自动全屏 可设置高度 上面注释掉了// },});},},
};
</script><style lang="scss" scoped>
</style>

效果图如下:

如果想要有场景切换和自定义标注这个功能点击下方:

Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房、房间切换和自定义标注(有源码)

感觉文章好的话记得点个赞关注收藏，一键三连,有错的地方麻烦指正一下，多谢！！！