Блог

Главная - Вопросы по программированию - игроку лотти vue 3 не удалось решить компонент

игроку лотти vue 3 не удалось решить компонент

#javascript #vue.js #vuejs3 #lottie

Вопрос:

Я пытаюсь использовать lottie-player в своем проекте vue 3, но всегда получаю предупреждение о том, что Vue не удалось разрешить компонент lottie-player. Я следую официальным документам lottieFiles (https://lottiefiles.com/web-player). Единственный браузер, который не работает, — это Chrome на iOS, для всех других протестированных браузеров и операционных систем он выдает только это предупреждение, но все равно работает.

Я перепробовал все виды пакетов npm, но не нашел для себя ни одного работающего. Моя последняя идея состоит в том, чтобы попытаться обнаружить chrome на iOS и показать там другую анимацию. Но, конечно, было бы здорово, если бы у кого-нибудь было решение моей проблемы, чтобы я не получил этого предупреждения. Я имею в виду, что было бы отстойно, если бы в Vue 3 не было способа использовать файлы Lottiefile, верно?лотти
документирует предупреждение Vue

Комментарии:

1. Похоже, это нужно применить v3.vuejs.org/api/…

2. @Kunukn Спасибо, но, к сожалению, это не работает

Ответ №1:

В настоящее время я обновляю vue-lottie-плеер LottieFiles для работы с Vue3, и когда мы завершаем веб-плеер lottie, я тоже столкнулся с этим точным предупреждением!

Удалось удалить его, добавив

 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

Метки: