全景krpano官方文件：https://krpano.com/docu/js/#top

全景krpano中文網站：http://www.krpano360.com/

1、將krpano檔案放到static檔案下

並在index.htm裡面引入tour.js

2、寫vue元件,若不存在生成先後的問題，可以直接在date裡面定義，或者在

 embedpano（{
  onready(krpano_interface){
    this.krpano = krpano_interface;
  }
}）都可以如下

<template>
  <div id="vouter">
      <div id="pano">
        <noscript>
          <table style="width:100%;height:100%;">
            <tr style="vertical-align:middle;">
              <td>
                <div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div>
              </td>
            </tr>
          </table>
        </noscript>

      </div>
 </div>

<script>
export default {
    name: "vouter",
    components: {},
    data() {
      return {
        //krpano物件
        krpano: document.querySelector('#krpanoSWFObject'),
      }
    },

    mounted() {
      let that = this;
      embedpano({
        swf: "../../static/tour.swf",
        xml: "../../static/tour.xml",
        target: "pano",
        html5: "auto",
        mobilescale: 1.0,
        passQueryParameters: true,
        onready(krpano_interface) {
          krpano = krpano_interface;
          setTimeout(function () {
            that.onreadyok(krpano)
          },1000)


        } //回撥函式，獲取Krpano 物件
      });

      // this.getHotspots(1, 3);
      // this.onreadyok()
    },


    methods: {
      onreadyok(krpano) {

        this.krpano = krpano;
        // this.krpano = document.querySelector('#krpanoSWFObject');
        //隱藏下方自帶控制條
        this.krpano.set('layer[skin_control_bar].visible', false);
        this.krpano.set('layer[skin_splitter_bottom].visible', false);
        this.krpano.set('layer[skin_scroll_window].visible', false);

        //初始化場景
        this.sceneList = this.krpano.get('scene').getArray()
        this.currentSceneIndex = this.krpano.get('scene').getItem(this.krpano.get('xml.scene')).index
        this.welcomeSceneIndex = this.krpano.get('scene').getItem(this.krpano.get('startscene')).index

        //熱點移動事件初始化
        let thisVue = this
        let pano = document.querySelector('#pano')
        pano.onmouseup = function () {
          thisVue.isHotspotMoving = false
        }
        pano.onmouseout = function () {
          thisVue.isHotspotMoving = false
        }
        pano.onmousemove = function () {
          thisVue.moveHotspot()
        }

      },

      }
  }
</script>
 

在路由裡直接應用即可

import Vouter from '@/components/vouter'
export const constantRoutes = [
  {
    path: '/',
    name: 'home',
    component: Vouter,
  },
  {path: '*', redirect: '/404', hidden: true}
]