时间戳

首页 > 解决方案 > Nuxt Project 404 页面刷新网页

nuxt.js - Nuxt Project 404 页面刷新网页

问题描述

我是 nuxt 的新手。我正在开发一个购物车网站。我使用 cookie 来存储令牌。标头授权将添加到令牌中。然后发送到 API 以获取信息。我在本地工作时测试良好。然后我运行命令“npm run generate”并将文件上传到服务器。在服务器上测试时发现错误。检查我使用nuxt-link执行nuxt路由器重定向可以从服务器获取信息（在选择购物车的过程中）。但是，当我刷新网页（按 F5）时，出现内部服务器错误。每个人都会建议帮助解决这个问题吗？谢谢！

下面是我的代码：
store/index.js （我不确定 this.$cookiz.get("usertoken") 是否会导致问题）

export const state = () => ({
    cart: {},
  });
  export const mutations = {
    SET_CART_DATA(state, value) {
      state.cart = value;
    },
  };
  export const actions = {
    async nuxtServerInit({ commit, dispatch }, { req }) {
      await dispatch("CartData");
    },
    async CartData({ commit }, value) {
        const config = {
          headers: { Authorization: this.$cookiz.get("usertoken") },
        };
        const { data } = await this.$axios.get(
          process.env.baseUrl + `/shopcar`,
          config
        );
        commit("SET_CART_DATA", data);
    },
  };

购物车.vue：

<template>
  <div>
    {{cart}}
  </div>
</template>
<script>
export default {
  data() {
    return {
        cart: this.$store.state.cart
    }
  }
}
</script>

错误消息： https ://drive.google.com/file/d/1V7zbuM-RprV0DGH-AO0SwJIY6dbrjbAm/view?usp=sharing

标签： nuxt.js

解决方案

如果您在开发人员工具中共享网络选项卡信息，它可以帮助更多

但我认为重新加载页面后，存储变为空，因此没有数据显示并导致问题，因此您可以使用 localstarage 或 sessionStorage 将数据保存在浏览器中

我认为这个链接可以帮助你：

https://medium.com/js-dojo/how-to-permanently-save-data-with-vuex-localstorage-in-your-vue-app-f1d5c140db69

推荐阅读