我在项目中使用Vue.js和Laravel，最近使用名为Lottie的插件添加了两个动画。每个动画都是一个组件，它们都使用一个单独的JSON文件为一组PNG图像设置动画（类似于PNG序列）。这两个JSON文件存储在本地/ project / 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");
然后在export default {...}内部，我忘记添加名称，所以：
components: { winAnimation, loseAnimation }
现在，我的代码已经拆分，我的app.js文件大小减少了将近一半！ :)
最佳答案
1-不要使用vue-lottie库。如果您看一下源代码，此库应提供的主要且唯一的东西是组件src/lottie.vue（+它是依赖项lottie-web），但是由于某些原因，NPM软件包还包含整个演示应用程序，包括演示程序JSON文件（src/assets/pinjump.json）
如果您看一下lottie.vue组件，它只是用于lottie-web的非常简单的包装程序，它提供了主要功能。通过摆脱vue-lottie，您将获得以下好处：vue-lottie完全忽略正在使用lottie-web instead of path的animationData选项之一-这里的文档不是很清楚，但是我想通过提供path，库将尝试临时下载动画数据，因此您不必无需将其包含在您的捆绑包中。值得一试...
按需加载动画数据
为什么在JSON文件上使用动态导入而不是动态导入整个组件？通过在组件级别上创建单独的块，动态块将不仅包含您的json数据，而且还包含不小的lottie-web。 Vue将在不进行任何其他代码更改的情况下处理组件的加载...
如果您仍然只想按需加载JSON数据，则必须了解Webpack动态导入（import(".....")）返回Promise，而lottie-web（进而是vue-lottie）则是期望对象。因此，您必须执行以下操作：
<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>
更新资料
在考虑将第三方组件添加到项目中时，您应该始终非常小心。我注意到的另一件事是
lottie-web在其API中具有destroy()方法。这表明它正在创建一些需要清除的资源（可能是DOM元素）。这是vue-lottie组件根本无法处理的事情，并且可能导致应用程序中的令人讨厌的内存泄漏。您可以阅读有关该问题的信息here