时间戳

首页 > 解决方案 > Nuxtjs 'npm generate' 不起作用，某些页面出现 401 错误

nuxt.js - Nuxtjs 'npm generate' 不起作用，某些页面出现 401 错误

问题描述

我将 nuxtjs 用于我的前端项目。在我完成了一些开发之后，我尝试使用共享托管来托管它，所以我运行了'npm run generate命令。但是有些页面会出现这个错误。

错误图片

这是我的银行页面代码

<template>
  <v-layout style="display:block">
    <h2>Banks Details</h2>
    <v-row>
      <v-col cols="12" sm="9">
        <v-data-table
          :headers="tableHedaer"
          :items="list.data"
          @update:page="nxtPage"
          :loading="loading"
          dense
          height="calc(100vh - 285px)"
          disable-items-per-page
        >
          <template v-slot:item.action="{ item }">
            <v-btn icon color="error">
              <v-icon @click=";(selectID = item.id), (dialogSureR = true)"
                >mdi-delete</v-icon
              >
            </v-btn>
          </template>
        </v-data-table>
      </v-col>
      <v-col cols="12" sm="3">
        <v-card
          style="border-radius: 0px; border:1px solid black;"
          height="calc(100vh - 180px)"
          flat
        >
          <v-card-text>
            <v-col cols="12" sm="12">
              Add new Bank
            </v-col>
            <v-divider />
            <v-col cols="12" sm="12">
              <v-text-field
                v-model="form.bankCode"
                outlined
                label="Bank Code"
                hide-details
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="12">
              <v-select
                v-model="form.accountType"
                :items="types"
                outlined
                label="Account Type"
                height="30"
                hide-details
              ></v-select>
            </v-col>
            <v-col cols="12" sm="12">
              <v-text-field
                v-model="form.bankName"
                outlined
                label="Bank Name"
                hide-details
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="12">
              <v-text-field
                v-model="form.branch"
                outlined
                label="Branch"
                hide-details
              ></v-text-field>
            </v-col>

            <v-col cols="12" sm="12">
              <v-text-field
                v-model="form.accountNo"
                outlined
                label="Account Number"
                hide-details
              ></v-text-field>
            </v-col>
            <v-col cols="12" sm="12" class="text-right">
              <v-btn @click="addBank()" color="indigo" small dark depressed
                >save</v-btn
              >
            </v-col>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <!-- remove dialog -->
    <v-dialog v-model="dialogSureR" max-width="290">
      <v-card>
        <v-card-title class="headline">Are You Sure?</v-card-title>

        <v-card-text> </v-card-text>

        <v-card-actions>
          <div class="flex-grow-1"></div>

          <v-btn @click="dialogSureR = false" color="red" text>
            No
          </v-btn>

          <v-btn @click="removeBank(selectID)" color="green darken-1" text>
            Yes
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <snack :s-text="sText" :s-color="sColor" :snackbar="snackbarv"></snack>
  </v-layout>
</template>

<script>
import snack from '~/components/Loaders/snackBar'
export default {
  components: {
    snack
  },
  data() {
    return {
      tableHedaer: [
        {
          text: 'ID',
          align: 'left',
          sortable: false,
          value: 'id'
        },
        {
          text: 'Bank Code',
          align: 'left',
          sortable: true,
          value: 'bankCode'
        },
        {
          text: 'Account Type',
          align: 'left',
          sortable: false,
          value: 'accountType'
        },
        {
          text: 'Bank Name',
          align: 'left',
          sortable: false,
          value: 'bankName'
        },
        {
          text: 'Branch',
          align: 'left',
          sortable: false,
          value: 'branch'
        },
        {
          text: 'Account Number',
          align: 'left',
          sortable: false,
          value: 'accountNo'
        },
        {
          text: 'Remove',
          align: 'left',
          sortable: false,
          value: 'action'
        }
      ],
      types: ['saving', 'current'],
      list: [],
      loading: false,
      sText: '',
      sColor: '',
      snackbarv: false,
      dialogSureR: false,
      selectID: '',
      form: {
        bankCode: '',
        accountType: '',
        bankName: '',
        branch: '',
        accountNo: ''
      }
    }
  },
  watch: {
    // snackbar modal value false time
    snackbarv() {
      if (this.snackbarv === true) {
        if (this.sColor === 'success') {
          setTimeout(() => {
            this.snackbarv = false
          }, 2000)
        } else if (this.sColor === 'warning') {
          setTimeout(() => {
            this.snackbarv = false
          }, 5000)
        } else {
          setTimeout(() => {
            this.snackbarv = false
          }, 3000)
        }
      }
    }
  },
  async asyncData({ $axios }) {
    const empcget = await $axios.$get('/admin/allBanks')

    return {
      list: empcget
    }
  },
  methods: {
    // get all banks data
    getAllE() {
      this.loading = true
      this.$axios.$get(`/admin/allBanks`).then((data) => {
        this.loading = false
        this.list = data
      })
    },
    // data table next and prev click load paginate data
    nxtPage(no) {
      this.loading = true
      this.$axios
        .$get(`${this.list.path}?page=${no}`)
        .then((data) => {
          this.list = data
          this.loading = false
        })
        .catch((error) => {
          this.loading = false
          console.log(error)
          alert('error')
        })
    },
    // add new bank
    addBank() {
      if (
        this.form.bankCode !== '' &&
        this.form.accountType !== '' &&
        this.form.bankName !== '' &&
        this.form.branch !== '' &&
        this.form.accountNo !== ''
      ) {
        this.$axios
          .$post(`/admin/saveNewBank`, this.form)
          .then((data) => {
            this.snackbarv = true
            this.sText = 'Done'
            this.sColor = 'success'
            this.list.data.push(data.data)
          })
          .catch((error) => {
            this.loading = false
            console.log(error)
            alert('error')
          })
      } else {
        this.snackbarv = true
        this.sText = 'Please fill all fields'
        this.sColor = 'warning'
      }
    },
    removeBank(id) {
      this.$axios
        .$delete(`/admin/removeBank/${id}`)
        .then((data) => {
          this.snackbarv = true
          this.sText = 'Done'
          this.sColor = 'success'
          this.nxtPage(this.list.current_page)
          this.dialogSureR = false
        })
        .catch((error) => {
          this.loading = false
          console.log(error)
          alert('error')
          this.dialogSureR = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .v-data-footer__select {
  visibility: hidden !important;
}
</style>

如果我删除下面的部分并运行npm run generate命令它可以正常工作

  async asyncData({ $axios }) {
    const empcget = await $axios.$get('/admin/allBanks')

    return {
      list: empcget
    }
  },

laravel 控制器功能

    /**
     * return all bank details
     * 
     * @return array all bank details
     */
    public function getAll(){
        $data = tblBank::paginate(50);
        return new BankDetailsResource($data);
    }

这有什么问题？

谢谢你..

标签： nuxt.jsnuxtjs

解决方案

您正在调用 asyncData 两次，这可能会导致您的错误。如果你想在你的 asyncData 中发出多个 axios 请求，你可以像这样使用 Promise 链：

async asyncData ({ $axios }) {
  const [empcget, customerget] = await Promise.all([ 
    $axios.get('/admin/allBanks'),
    $axios.get('/admin/allCustomers'),
  ])

  return {
    list: empcget.data,
    customers: customerget.data
  }
},

推荐阅读