TypeError：基于 Nuxt 的生产版本答案

【问题标题】：TypeError: Production Build on NuxtTypeError：基于 Nuxt 的生产版本
【发布时间】：2021-02-18 05:30:53
【问题描述】：

我最近一直在使用 nuxt。
我的代码在开发环境中运行良好。
当我在生产环境中运行 npm run build 并启动项目时，
我发现了一个错误，但对错误代码或其他方面没有太多帮助。 This was my app with error without any spesific path and else

This was my app on development environment

当我尝试同时添加 vue-awesome-swiper 和 vue-carousel 时会发生此错误。
当然是条件渲染。
当我只使用 vue-awesome-swiper 或 vue-carousel 时，它首先工作得很好。
但是当我尝试同时添加它们时，它突然崩溃了。
现在，当我尝试仅使用其中一个或同时删除它们时，它会给出相同的错误。

谁能帮我解决这个错误。
这是我在 vue-awesome-swiper 上的代码。

<v-container 
@mouseover="showNavButtons()"
@mouseleave="hideNavButtons()"
fluid 
v-if="sub_categories" 
class="pa-0 pb-5 pt-3">
<client-only>
  <Swiper 
    :class="`swiper pb-6 ${!$vuetify.breakpoint.xsOnly ? 'pl-1 pr-2 pt-3':'pl-2 pr-15'}`" 
    :options="swiperOption"
    :auto-destroy="true" 
    ref="swiper"
    :delete-instance-on-destroy="true"
    :cleanup-styles-on-destroy="true"
    >
    <swiper-slide v-for="sub_category in sub_categories" :key="sub_category.id" class="mt-10">
      <v-card height="250px" class="overflow-hidden" style="box-shadow:2px 2px 8px rgba(0, 0, 0, 0.1);">
        <v-img width="100%" height="100%" lazy-src="/images/abu.jpg" :src="subCategoryImageSource(sub_category.name) ? subCategoryImageSource(sub_category.name) : sub_category.image ? sub_category.thumbnail_link : `/images/category_photo.png`"/>
        <v-row class="position-absolute" style="top: 95px; left: 40px">
          <v-col cols="12" class="pa-0">
            <span class="d-block black--text letter-spacing text-left gt-walsheim-regular pb-1">SHOP</span>
          </v-col>
          <v-col cols="12" class="pa-0">
            <span class="letter-spacing main-color text-uppercase dosis-bold" style="font-size: 1.25rem" v-html="breakWords(sub_category.name)">
              </span> 
          </v-col>
        </v-row>
        
        <v-row class="position-absolute" style="bottom: 20px; left: 40px">
          <router-link :to="`/categories/${category_slug}/sub-categories/${sub_category.slug}`" >
            <v-btn outlined class="main-color letter-spacing d-block mt-2 px-5 button-hover-primary category-card-button dosis-semi-bold border-hover-primary">SHOP NOW</v-btn>
          </router-link>
        </v-row>
        <router-link :to="`/categories/${category_slug}/sub-categories/${sub_category.slug}`">
        </router-link>
      </v-card>
    </swiper-slide>
    <div class="swiper-scrollbar" slot="scrollbar" style="bottom: 0px"></div>
  </Swiper>
</client-only>

这是我在 vue-carousel 上的代码。

<v-container 
@mouseover="showNavButtons()"
@mouseleave="hideNavButtons()"
fluid v-if="sub_categories" 
class="pa-0 pb-5 pt-3">
<client-only>
  <div v-if="$vuetify.breakpoint.smAndUp" style="display:flex; justify-content:center">
    <carousel
      class="sub-category-carousel"
      :navigationEnabled="navigation" 
      :autoplayHoverPause="true" 
      :autoplay="false"  
      :paginationPadding="0" 
      paginationActiveColor="#b3b3b3"
      navigationNextLabel="<img src='/icons/next.png' class='slider-navigation'></img>"
      navigationPrevLabel="<img src='/icons/previous.png' class='slider-navigation'></img>" 
      :autoplayTimeout="5000" 
      paginationColor="white" 
      paginationPosition="top"
      :style="`width: ${$vuetify.breakpoint.smAndDown ? '85%' : '100%'};`"
      :loop="true"
      :centerMode="true"
      :perPageCustom="[[100, 1], [700, 2], [1700, 3]]"
    > 
      <slide v-for="sub_category in sub_categories" :key="sub_category.id">
        <v-col cols="12" class="pa-0 pb-5 text-center px-3">
          <v-card height="250px" class="overflow-hidden" style="box-shadow:2px 2px 8px rgba(0, 0, 0, 0.1);">
            <div class="position-relative grey-background overflow-hidden category-card">
              <v-img 
                v-if="sub_category.image"
                :src="subCategoryImageSource(sub_category.name) ? subCategoryImageSource(sub_category.name) : sub_category.image ? sub_category.thumbnail_link : `/images/category_photo.png`"
                lazy-src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
                :title="sub_category.name" 
                width="100%"
                height="100%"
                class="position-absolute" 
                >
                <template v-slot:placeholder>
                  <v-row
                    class="fill-height ma-0"
                    align="center"
                    justify="center"
                  >
                    <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                  </v-row>
                </template>
              </v-img>
              <div class="category-carousel-container pa-5 pl-5">
                <span class="d-block category-card-shop letter-spacing text-left dosis-semi-bold">SHOP</span>
                <div class="category-card-name-container">
                  <span class="letter-spacing main-color text-left text-uppercase dosis-semi-bold table-caption category-title dosis-bold">{{ sub_category.name }}</span> 
                </div>
                <router-link :to="`/categories/${category_slug}/sub-categories/${sub_category.slug}`">
                  <v-btn outlined class="main-color letter-spacing d-block mt-2 px-5 button-hover-primary category-card-button gt-walsheim-pro-medium border-hover-primaryC">SHOP NOW</v-btn>
                </router-link>
              </div>
            </div>
          </v-card>
        </v-col>
      </slide>
    </carousel>
  </div>
</client-only>

这是我使用子组件时的父组件

<v-container fluid class="px-0 pt-3 pb-0">
<v-row class="mb-5 px-0" v-for="category in featured_categories" :key="category.id">
  <v-layout justify-center align-center>
    <v-col v-if="loading" cols="12">
      <LazyLoading />
    </v-col>
    <v-col 
      xl="9"
      lg="10"
      sm="12"
      md="10"
      cols="12"
      :class="$vuetify.breakpoint.smAndDown ? 'pa-0 pl-5':'pa-0'">
      <div>
        <LazyHomeHeaderHomeComponentIcon :content="'SHOP BY ' + `<br class='hidden-md-and-up'>` + category.name" />
      </div>

      <div v-if="width >= 600">
        <LazyCarouselSubCategory :sub_categories="category.sub_categories" :category_slug="category.slug" />
      </div>
      <div v-else>
        <LazySwiperSubCategory :sub_categories="category.sub_categories" :category_slug="category.slug" />
      </div>
      <v-layout justify-center class="pb-5">
        <v-btn class="main-background-color white--text letter-spacing px-8 button-hover-secondary dosis-semi-bold" :to="`/categories/${category.slug}`">VIEW ALL</v-btn>
      </v-layout>
    </v-col>
  </v-layout>
</v-row>

非常感谢您的帮助，谢谢。

【问题讨论】：

父组件有结束标签，我只是想念复制我的代码。对不起

标签： vue.js nuxt.js production-environment dev-to-production

【解决方案1】：

我找到了解决方案。
这些图像似乎在生产构建时崩溃了，当我用静态图像进行更改时，它的效果很好。
因此，如果有人遇到同样的问题，请尝试评论您的所有资产，

【讨论】：