vue 3 lottie-player 無法解析組件

Question

我正在嘗試在我的 vue 3 項目中使用 lottie-player，但我總是收到 Vue 無法解析組件 lottie-player 的警告。 我正在關注 lottieFiles ( https://lottiefiles.com/web-player ) 的官方文檔。 唯一不工作的瀏覽器是 iOS 上的 Chrome，對於所有其他經過測試的瀏覽器和操作系統，它只會拋出該警告，但它仍然可以工作。

我嘗試了所有類型的 npm 軟件包，但沒有找到適合我的軟件包。 我的最新想法是嘗試在 iOS 上檢測 chrome，並在那里顯示不同的 animation。 但當然，如果有人能解決我的問題，這樣我就不會收到警告，那就太好了。 我的意思是如果沒有合適的方法在 Vue 3 中使用 lottieFiles 會很糟糕，對吧？ lottie docs Vue警告

Answer 1

對於任何在 Vite2x+ 上苦苦掙扎的人，請相應地更改您的 vite.config.js 文件：

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: { //✅ here
        isCustomElement: tag => tag === 'lottie-player'
      }
    }
  }) ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Answer 2

由於 lottie-player 是一個 Web 組件，您應該將其聲明為編譯器選項。

檢查此自定義元素互操作

如果你使用 vue-cli pass config 通過 chainWebpack

檢查這個Vue CLI 配置

Answer 3

我目前正在更新 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