使用vue-cli(3.0.0-rc.5)重新构建后,无法到达Lottie模块的路径。我应该玩配置吗?
<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>
答案 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 }