我正在为我的项目使用Vue.js和Laravel，最近使用名为Lottie的插件添加了两个动画。每个动画都是一个组件，它们都使用一个单独的JSON文件为一组PNG图像设置动画（类似于PNG序列）。这两个JSON文件本地存储在项目文件夹中的路径/ public / data /下。
首先，除非我输入绝对路径（/ users / username / documents / projectname / public / data / filename.json，否则不会读取JSON文件，没有办法让它正常工作只需使用/ data / filename.json？
第二，当我在组件中添加以下代码时，我的JS文件将按预期编译为单独的块：
const animationData = () =>
import("/users/username/documents/projectname/public/data/filename.json");
动画运行时出现以下错误：
Invalid prop: type check failed for prop "data". Expected Object, got Function
found in
---> <VueLottie>
但是，当我使用如下所示的组件中的常规导入来导入json文件时，它可以正常工作并显示动画：
import animationData from "/users/username/documents/projectname/public/data/filename.json";
我的动画组件都这样设置：
<template>
<vue-lottie ref="lottie" loop autoplay :data="animationData" :height="400" :width="400"></vue-lottie>
</template>
<script>
import vueLottie from "vue-lottie-ssr";
import animationData from '/users/username/documents/projectname/public/data/filename.json'
export default {
name: 'animation',
components: {
vueLottie
},
data () {
return {
speed: 1,
animationData
}
},
computed: {
lottie () {
return this.$refs.lottie
}
}
}
</script>
我也尝试过在组件安装时通过axios调用获取JSON文件，但是会发生相同的错误。
更新
我更新了代码，以便每个组件都被延迟加载，而不是JSON文件。像这样：
components: {
WinAnimation: () => import("./WinAnimation.vue");
LoseAnimation: () => import("./LoseAnimation.vue");
}
但是现在出现以下错误：
Unknown custom element: <win-animation> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
更新2
我意识到为什么收到错误消息。正确的方法是在父vue文件中的脚本顶部添加以下内容。
const winAnimation = () => import("./WinAnimation.vue");
const loseAnimation = () => import("./LoseAnimation.vue");
然后在导出默认值{...}中，我忘记添加名称，所以：
components: { winAnimation, loseAnimation }
现在我的代码已拆分，我的app.js文件大小减小了将近一半！ :)
1st-不要使用vue-lottie库。如果您看一下源代码，此库应提供的主要且唯一的东西是组件src/lottie.vue（+它是依赖项lottie-web），但由于某些原因，NPM软件包还包含整个演示应用程序包括演示JSON文件（src/assets/pinjump.json）
[如果您查看lottie.vue组件，它只是lottie-web的非常少且非常简单的包装器，它提供了主要功能。通过摆脱vue-lottie，您将获得以下好处：
vue-lottie完全忽略了正在使用lottie-web的path instead of animationData选项之一-这里的文档不是很清楚，但是我想通过提供path，库将尝试下载动画数据ad-临时的，因此您无需将其包含在捆绑包中。值得尝试恕我直言...
按需加载动画数据
animationData。 Vue将在不更改任何其他代码的情况下处理组件的加载...path）返回Promise，而lottie-web（进而是import(".....")）则是对象。因此，您必须执行以下操作：lottie-web在考虑将第三方组件添加到项目中时，您应该始终非常小心。我注意到的另一件事是vue-lottie在其API中具有<script>
import lottie from 'lottie-web';
const animationData = () =>
import("/users/username/documents/projectname/public/data/filename.json");
export default {
mounted () {
animationData().then(function(data) {
this.anim = lottie.loadAnimation({
// other options
animationData: data
})
});
}
}
</script>
方法。这表明它正在创建一些需要清除的资源（可能是DOM元素）。这是lottie-web组件根本无法处理的事情，可能会导致应用程序中令人讨厌的内存泄漏。您可以阅读有关问题的信息destroy()
destroy()属性设置为函数，因此该行：
期望的对象，具有功能
它需要一个对象，而不是一个函数。函数为：
vue-lottie定义here属性时，需要将一个对象设置为其值。然后，在安装animationData时，数据（或者如果愿意，可以使用Axios）更新组件上的const animationData = () =>
import("/users/username/documents/projectname/public/data/filename.json");
属性。
N.B。我从未使用过Vue，所以我希望我所说的是正确的。
animationData