如何解决TypeError：在Nuxt上进行生产构建
我最近在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.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.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>
非常感谢您的帮助，谢谢。
解决方法
我找到了解决方法。
当我使用静态图像进行更改时，图像似乎在生产环境中崩溃了。
因此，如果有人遇到相同的问题，请尝试评论您的所有资产，
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
