vue.js - Vue.js 中的 Rive 动画 - 使用资产中的 .riv 文件

Question

我按照官方文档在 Vue.js 中实现了一个 Rive 动画：

<template>
  <div>
    <canvas ref="canvas" width="80" height="80"></canvas>
  </div>
</template>

<script>
import { Rive } from "@rive-app/webgl";
export default {
  mounted() {
    new Rive({
      canvas: this.$refs.canvas,
      src: "http://localhost:8081/test.riv",
      autoplay: true,
    });
  },
};
</script>

这种方式工作得很好。当我尝试用文件夹中文件src的路径替换参数时，动画不会显示。我已经尝试过：.rivassets

src: "../assets/test.riv",
src: "assets/test.riv",
src: "@/assets/test.riv",
src: require("../assets/test.riv"),
src: require("assets/test.riv"),
src: require("@/assets/test.riv"),