vue使用krpano 全景图

最新推荐文章于 2026-04-02 09:02:39 发布

原创最新推荐文章于 2026-04-02 09:02:39 发布 · 2.4k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文介绍了在Vue项目中使用krpano实现全景图的步骤，包括环境配置（vue-cli 4.2.2和krpano 1.19），安装vue-krapano，引用krpano.js和可选的gyro2.js，详细讲解了xml配置文件的使用，@panoCreated初始化方法，以及图片引用的结构。特别提到了在Vue版本升级后可能出现的挂载问题及其解决方案，通过修改vue.config.js解决了这个问题。

准备工作

环境：
vue-cli：4.2.2
krpano: 1.19

安装vue-krapano

npm install vue-krpano --save

引用

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

引用krpano包

index.html中

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

在这里插入图片描述
需要：krpano.js

可选：gyro2.js(移动端螺旋仪和加速传感器使用得到)

使用

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

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

图片引用
结构：

这和它的加载方式有关。找到一个详细介绍的网站

    <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')

今天琢磨了大半天，终于跑通了