vue使用krpano 全景圖

準備工作

環境：
vue-cli：4.2.2
krpano: 1.19

1. 安裝vue-krapano

npm install vue-krpano --save

2. 引用

import Vue from "vue";
import Krpano from "vue-krpano";
Vue.use(Krpano);

3. 引用krpano包

index.html中

  <script src="krpano/krpano.js"></script>

需要：krpano.js

可選：gyro2.js(移動端螺旋儀和加速傳感器使用得到)

4. 使用

<krpano :xml="'krpano.xml'" :lazy-load="true" style="width:100%;height:400px" @panoCreated="init"></krpano>

xml: 就是你的主配置文件。
@panoCreated：初始化的方法

5. 圖片引用
   結構：
   
   這和它的加載方式有關。找到一個詳細介紹的網站

    <image type="CUBE" multires="true" tilesize="512">
      <level tiledimagewidth="512" tiledimageheight="444">
        <cube url="/krpano/image/%s/l1/%v/l1_%s_%v_%h.jpg" />
      </level>
      <level tiledimagewidth="956" tiledimageheight="888">
        <cube url="/krpano/image/%s/l2/%v/l2_%s_%v_%h.jpg" />
      </level>
      <level tiledimagewidth="1910" tiledimageheight="1910">
        <cube url="/krpano/image/%s/l3/%v/l3_%s_%v_%h.jpg" />
      </level>
    </image>

其中tiledimagewidth，tiledimageheight就是平鋪的寬和高，你的寬高可能和我不一樣，需要你自己做個加法。
官網上又很多的案例

可能遇到的問題：

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

是應爲vue版本升級了，掛載的方式不一樣了

解決:
vue.config.js:

 // 配置路徑別名
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')

今天琢磨了大半天，終於跑通了