Nuxt SSR와 FireBase 통합

Nuxt SSR와 FireBase 통합

프로젝트 폴더를 Firebase에 도입할 수 있도록 재구축하려고 했는데, 이 저장소 Nuxt Firebase Vuetify를 보세요.에서nuxt.config.jsbuildDir를 로 변경했습니다.../functions/.nuxt첫눈에 효과가 있었던 것 같습니다.하지만 Vuetify와 같은 UI 프레임워크의 커스텀 컴포넌트를 사용할 때마다 오류가 발생합니다.브라우저 콘솔에 다음과 같은 오류가 있습니다.

클라이언트 측에서 렌더링된 가상 DOM 트리가 서버 렌더링 컨텐츠와 일치하지 않습니다.이는 잘못된 HTML 마크업이 원인일 수 있습니다.예를 들어 블록레벨 요소를 <p> 내부에 네스트 하거나 누락하거나 수화 처리를 하거나 클라이언트 측 렌더를 완전히 실행하거나 하는 등의 문제가 있습니다.

내가 이걸 어떻게 해결할 수 있을까?아니면 그 프로젝트에서 다른 구성을 놓쳤거나요?

이것은 꽤 오래된 것입니다만, 며칠전에 우연히 같은 문제를 발견했기 때문에, 장래에 고객이나 다른 사람에게 도움이 될지도 모릅니다.

제가 알기로는 이 문제는vue모듈은 Nuxt의 종속성이며 함수 폴더 내에 설치됩니다.Nuxt를 에서 실행할 때buildDir로 설정하다.functions/.nuxt그리고.import Vue from 'vue'플러그인으로 Nuxt에서 사용하는 Vue 클래스와는 다른 Vue 클래스를 얻을 수 있습니다.내가 알기로는 이건 Nuxt의 버그야.

핫픽스 방법:

• 를 삭제합니다.nuxt그리고.vue의 모듈node_modules내부functions디렉토리, 모든 것이 정상적으로 실행됩니다.
• Firebase Functions에서 이러한 모듈을 사용하는 경우 Firebase로 전개하기 전에 모듈을 다시 설치해야 합니다.

Metaphalo의 답변은 나에게 효과가 있습니다.이것에 덧붙이고 싶은 것은, srcDir:nuxt 디렉토리가 모두 있는 「src」입니다.

nuxt.config

srcDir: 'src', buildDir: process.env.NODE_ENV === 'production' ? 'functions/.nuxt' : '.nuxt',

그래서 당신은 개발에서 플로긴을 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/48839593/nuxt-ssr-with-firebase-integration