vue 3 lottie-player 无法解析组件

Question

我尝试在我的 vue 3 项目中使用 lottie-player，但我总是收到 Vue 无法解析组件 lottie-player 的警告。我正在关注 lottieFiles (https://lottiefiles.com/web-player) 的官方文档。 唯一不工作的浏览器是 iOS 上的 Chrome，对于所有其他经过测试的浏览器和操作系统，它只会抛出该警告，但它仍然可以工作。

我尝试了各种 npm 包，但没有找到适合我的。我最新的想法是尝试在 iOS 上检测 chrome 并在那里显示不同的动画。但是，如果有人能解决我的问题，这样我就不会收到警告，那当然会很好。我的意思是，如果在 Vue 3 中没有合适的方式使用 lottieFiles，那会很糟糕，对吧？lottie docs Vue warning

Answer 1

我目前正在更新 LottieFiles vue-lottie-player 以与 Vue3 一起使用，当我们包装 lottie-web 播放器时，我也遇到了这个确切的警告！

设法通过添加删除它

isCustomElement: tag => tag === 'lottie-player'

在我的 vue.config.js 文件中。这是完整配置，您可以忽略所有其他内容：

//Compiler options
const path = require(`path`);

module.exports = {
    configureWebpack: {
        resolve: {
            symlinks: false,
            alias: {
                vue: path.resolve(`./node_modules/vue`)
            }
        }
    },
    chainWebpack: config => {
        config.resolve.alias.set('vue', '@vue/compat')

        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return {
                    ...options,
                    compilerOptions: {
                        compatConfig: {
                            MODE: 2
                        },
                        isCustomElement: tag => tag === 'lottie-player'
                    }
                }
            })
    }
}

vue播放器链接：https://github.com/LottieFiles/lottie-vue