마운트되었지만 프로덕션 환경에서는 렌더링되지 않은 템플릿 태그(개발 환경에서는 렌더링됨):Nuxtjs Vuejs Vuetifyjs 롤업즈

마운트되었지만 프로덕션 환경에서는 렌더링되지 않은 템플릿 태그(개발 환경에서는 렌더링됨):Nuxtjs Vuejs Vuetifyjs 롤업즈

동의어

무슨 일인지 설명하겠습니다.다음을 수행했습니다.

1. Vuetify 컴포넌트를 사용하여 커스텀 Vue 컴포넌트를 만들었습니다.
2. 이러한 Vuetify 컴포넌트와 (1)의 커스텀 컴포넌트를 사용하여 커스텀 Vue 컴포넌트를 만들었습니다.
3. rollupjs를 사용하여 이러한 컴포넌트를 번들합니다.
4. 이 컴포넌트를 npm에 공개했습니다.
5. GitLab에 배포된 것은 (npm의 것이 아닌) 컴포넌트의 로컬 버전을 사용하여 (2)의 "메인" 컴포넌트의 예를 페이지합니다.
6. 새로운 핵스트 프로젝트를 만들었다
7. 도킹했다
8. (4)부터 패키지를 설치하고 사용합니다.
9. GitLab 페이지에 이 테스트 저장소를 배포합니다.

이 투고에 영감을 준 것은 무엇인가: 1.컴포넌트의 저장소 GitLab 페이지(위에서 5단계)에서 컴포넌트는 렌더링 및 마운트 2가 됩니다.테스트 저장소 GitLab 페이지(위에서 9단계)에서 컴포넌트는 마운트되지만 템플릿은 렌더링되지 않습니다(예: 템플릿 태그).<my-component></my-component>)3. 시험 보고에서, 개발에 모든 것 4은 괜찮아 docker을 이용해=3. 테스트 저장소에서는 개발 시 도커를 사용해도 문제 없습니다.4다. 시험을 보고에서 구성 요소지만렌더링되지 않았습니다 마운트되었지만저장소에서구성 요소가 rendered테스트지 않고 있다.

세부 사항

그 불쾌한 요소문제의 컴포넌트가 호출됩니다라고 불린다.VRecordsTable는 패키지로부터 포장에서valpha그 Vuetify 요소 Vuetify컴포넌트 포장지입니다. 그것은 래퍼입니다.VDataTable그리고 사용자 지정 슬롯, 논리 그리고 몇 다른 요소들을 추가한다.커스텀 슬롯,컴포넌트를 추가합니다 기타로직 싱크.(링크 아래).(아래 참조).

이 컴포넌트는 실가동 환경에 마운트되어 있습니다(데이터는 거기에 있고 vuex 스토어를 통해 반응도 가능). 그러나 html은 다음과 같습니다.

<v-col><v-data-table page="0" items-per-page="5" items="record1,record2,record3,record4,record5,record6,record7,record8,record9" calculate-widths="true" fixed-header="" headers-length="7"></v-data-table></v-col>

다음은 링크된 테스트 리포의 이미지입니다.

컴포넌트에는 데이터가 모두 탑재되어 있습니다만, 다른 컴포넌트와 달리 내부 컴포넌트를 확인할 수 있는 드롭 다운은 없습니다.

나는 어디가 잘못되었는지 모르겠습니다처럼 유용한 파일에 더하여 두는 성분과 시험 회수된 자동차의 환매 조건부 약정에, 나는 어디가 틀려, 이 기둥의 바닥에 갔다 회전이 빠른 링크도 모르겠어요.이 투고 아래에는 컴포넌트 및 테스트 리포에 대한 빠른 링크와 다음과 같은 유용한 파일이 있습니다.rollup.config.js

유용한 명령어

테스트 리포의 도커에 대해서는, 다음을 사용해 주세요.

# dev
docker-compose -f docker-compose.development.yml build
docker-compose -f docker-compose.development.yml up
docker-compose -f docker-compose.development.yml down

# prod
docker-compose -f docker-compose.production.yml build
docker-compose -f docker-compose.production.yml up
docker-compose -f docker-compose.production.yml down

링크

• 컴포넌트 리포트:

  • 컴포넌트의 npm 패키지
  • 컴포넌트의 gitlab 페이지
  • 컴포넌트의 git 저장소
  • 컴포넌트의 rollup.config.config.s
  • 패키지.컴포넌트의 json 파일
  • 컴포넌트 repo의 nuxt.config.displays
  • rollup.config.displays에서 사용되는 entry.displays
  • 구성 요소의 마음을 상하게 한다VRecordsTable

• 테스트 리포트

  • 테스트 리포의 gitlab 페이지
  • 테스트 리포트

직감

• 무언가를npm run start대npm run dev/ 어떻게 nuxt 지어졌다는 것입니다 이 문제?
• rollup.config.js 설정 방법에 문제가 있습니까?
• 뷰티파이가 있는 게 문제인가요?

https://github.com/vuetifyjs/vuetify-loader/issues/70

test-valpha는 vuetify-valpha를 사용하지만 valpha는 사용하지 않기 때문에 필요한 vuetify 성분이 자동으로 수입되지 않습니다.통상, 이것에 관한 경고는 표시되지만, nuxt는 실가동 모드에서는 경고를 억제합니다.@nuxtjs/vuetify 모듈은 어떤 이유로든 실가동 모드에서는 vuetify-loader만 사용하기 때문에 개발 중에는 정상적으로 동작하고 있는 것 같습니다.

github 문제에는 다음과 같은 해결 방법이 있습니다.

• 필요한 컴포넌트를 Import 합니다.valpha(아래 참조) 및
• 테스트 밸브에서 treeShake를 true로 설정하여 항상 vuetify-loader를 사용합니다.

또는

• 테스트 밸브에 vuetify 로더를 사용하지 마십시오(treeShake: false)

구성 요소 가져오기

라이브러리가 Web 팩을 사용하고 있는 경우는, vuetify-loader 를 인스톨 하면 됩니다만, 롤 업에는 유사한 것이 없기 때문에, 메뉴얼의 설명에 따라서 수동으로 추가할 필요가 있습니다.

<template>
  <v-card>
    <v-card-title>...</v-card-title>
    <v-card-text>...</v-card-text>
  </v-card>
</template>

<script>
  import { VCard, VCardText, VCardTitle } from 'vuetify/lib'

  export default {
    components: {
      VCard,
      VCardText,
      VCardTitle,
    }
  }
</script>

언급URL : https://stackoverflow.com/questions/59107674/component-mounted-but-template-tags-not-rendered-in-production-environment-but