Question

我的Nuxt JS网站有一个奇怪的问题。我已经创建了一个系统，该系统使用Vue资源和URL参数来获取JSON数据以构建页面，其想法是最终将通过后端/ API对其进行控制。

我面临的问题是，在开发模式下运行npm run dev时，页面工作正常，但是，在生产模式下，页面崩溃并在刷新页面时导致500个内部服务器错误。但是在加载主页然后导航到页面时它们不会中断。（主页是.vue文件）。

我不确定从哪里开始这个问题。这是我的页面，本质上是从当前本地保存的JSON文件中提取数据，并且每个页面现在都是一个JSON文件。不过，它在开发模式下也可以正常工作。

<template>
  <div class="page-json">
    <pageBanner v-bind:bannerTitle="banner.bannerTitle" v-bind:bannerSubTitle="page.bannerSubTitle" v-bind:subTitleEnabled="page.bannerHasSubTitle" v-bind:bgClass="banner.bgClass" />
    <section class="py-4 py-md-5">
      <div class="container">
        <div class="row py-4 py-md-5">
          <div class="col-lg-4 col-md-4 col-sm-12">
            <SearchComponent v-bind:orientationMargin="search.hasMargin" v-bind:searchPosition="search.orientation" v-bind:componentClass="search.searchClass" />
          </div>
          <div class="col-lg-8 col-md-8 col-sm-12 page-content">
            <div v-html="page.content"></div>
            <Alert v-bind:hasClass="errors.api.hasClass" v-bind:hasError="errors.api.hasError" v-bind:message="errors.api.message" v-bind:icon="errors.api.icon" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import pageBanner from '~/components/PageBanner.vue'
import SearchComponent from '~/components/SearchComponent.vue'
import Alert from '~/components/Alert.vue'
export default {
  components: {
    pageBanner,
    SearchComponent,
    Alert
  },
  data () {
    return {
      slug: this.$route.params.slug,
      page: [],
      banner: {
        bannerTitle: 'Page',
        bgClass: 'jumbotron-houses jumbotron-page'
      },
      search: {
        searchClass: 'mb-4 mb-md-0',
        hasMargin: 'mb-3',
        orientation: 'd-block'
      },
      errors: {
        api: {
          hasError: false,
          hasClass: 'alert-danger mt-3 mt-md-0',
          message: 'We was unable to fetch you property data.',
          icon: 'error'
        }
      }
    }
  },
  created() {
    this.$http.get('/pages/' + this.slug + '.json').then(response => {
      this.page = response.body
    }, response => {
      // this.$router.push('/404') 
    });
  },
  head () {
    return {
      title: this.page.pageTitle + ' | Site',
      meta: [
        { hid: 'description', name: 'description', content: this.page.pageDescription + ' - Site' }
      ]
    }
  }
}
</script>

不完全确定为什么刷新页面或直接访问页面时会导致内部服务器错误。

有人可以帮忙吗？

更新：

这可能是因为缺少.htaccess文件/重写了吗？在生产模式下，dist文件夹没有.htaccess文件吗？

这是我的Apache错误日志：

[Tue Sep 25 11:51:39 2018] [error] [client ::1] Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: http://property-boilerplate.ryan/testimonials

刷新使用JSON加载的页面时出现Nuxt JS 500错误

0 个答案: