找不到相对模块:vue-lottie

时间:2018-11-02 13:20:07

标签: vue.js npm vue-cli-3

使用vue-cli(3.0.0-rc.5)重新构建后,无法到达Lottie模块的路径。我应该玩配置吗?


    ./node_modules/cache-loader/dist/cjs.js中的
  • ./ lottie.vue -ref--12-0!./ node_modules / babel-loader / lib!./ node_modules / cache-loader / dist /cjs.js??ref--0-0!./ node_modules / vue-loader / lib ?? vue-loader-options!./ src / components / HelloWorld.vue?vue&type = script&lang = js&

<template>
<div id="app">
    <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
    <div>
        <p>Speed: x{{animationSpeed}}</p>
        <input type="range" value="1" min="0" max="3" step="0.5"
               v-on:change="onSpeedChange" v-model="animationSpeed">
    </div>
    <button v-on:click="stop">stop</button>
    <button v-on:click="pause">pause</button>
    <button v-on:click="play">play</button>
</div>

<script>
      import Lottie from './lottie.vue';
      import * as animationData from './assets/data.json';
      export default {
        name: 'app',
        components: {
          'lottie': Lottie
        },
        data() {
          return {
            defaultOptions: {animationData: animationData},
            animationSpeed: 1
          }
        },
        methods: {
          handleAnimation: function (anim) {
            this.anim = anim;
          },
          stop: function () {
            this.anim.stop();
          },
          play: function () {
            this.anim.play();
          },
          pause: function () {
            this.anim.pause();
          },
          onSpeedChange: function () {
            this.anim.setSpeed(this.animationSpeed);
          }
        }
      }
    </script>

2 个答案:

答案 0 :(得分:1)

如果您使用的是vue-lottie软件包,则导入应该是

import Lottie from 'vue-lottie';

这是因为lottie软件包位于node_modules文件夹中,您必须提供正确的路径或使用直接的软件包名称导入。 附带说明一下,我认为Vue cli的当前版本为v3.1.1,因此您绝对应该升级。

答案 1 :(得分:0)

如果仍然无法正常运行,请在defaultOptions中将animationData更改为animationData.default。

defaultOptions: { animationData: animationData.default }