Nuxt 应用程序在部署到现在时在刷新时出现 404 错误

Question

刷新页面时，我的 nux 应用程序显示 404 not found 错误。如果我通过 nuxt-links 路由浏览 ssr，它工作正常。我做错了什么？

我正在使用“now”命令部署到 now.sh。

我正在使用 slug 并且我的主 vue 文件是 _vue.vue 作为动态页面的主模板。

<template>
<div>
<headerBanner :pagetitle="post[0].title.rendered" :acf_subtitle="post[0].acf.subtitle_text"/>
</div>
</template>

<script>
import axios from 'axios' 
import headerBanner from '~/components/headerbanner.vue'

export default {

  components: {
      headerBanner
  },

  asyncData ({ params, error }) {
    console.log(`https://mywebsite.com/wp-json/wp/v2/pages?slug=${params.vue}`)
    return axios.get(`https://mywebsite.com/wp-json/wp/v2/pages?slug=${params.vue}`)
    .then((res) => {
      return { post: res.data }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  },

  layout: 'default'
}


</script>

现在.json

{
    "version": 2,
    "name": "nuxt-static",
    "builds": [
        { "src": "package.json", "use": "@now/static-build" }
    ]
}

package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "My Nuxt.js project",
  "author": "jordan",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "now-build": "nuxt generate"  
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/free-solid-svg-icons": "^5.7.2",
    "@nuxtjs/axios": "^5.4.1",
    "@nuxtjs/pwa": "^2.6.0",
    "cross-env": "^5.2.0",
    "nuxt": "^2.4.0",
    "nuxt-fontawesome": "^0.4.0",
    "nuxt-payload-extractor": "^0.0.8",
    "vue-resource": "^1.5.1",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.9",
    "sass-loader": "^7.1.0"
  }
}

Answer 1

您将其部署为静态网站。 Nuxt 默认不为动态页面生成路由。

无论如何，您现在都可以使用 nuxt 构建。 https://github.com/nuxt/now-builder

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/now-builder",
      "config": {}
    }
  ],
  "routes": [
    { "src": "/_nuxt/.+", "headers": { "cache-control": "s-maxage=31536000" } },
    { "src": "/(.*)", "dest": "/" }
  ]
}