nuxt项目部署到nginx引发的问题

Question

按照vue history官方说明，已经将nginx配置修改成

 location / {
            try_files $uri $uri/ /index.html;
        }

并且，在nuxt项目已设置layout/error.vue，结果是404地址会显示首页内容，非404地址会调转到相应页面。
vue history官方有相应说明

给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

我看了nuxt项目的自动渲染的路由

export function createRouter () {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,
    routes: [
        {
            path: "/product/test",
            component: _cda7ca6c,
            name: "product-test"
        },
        {
            path: "/product/:id?",
            component: _fb3a329c,
            name: "product-id"
        },
        {
            path: "/",
            component: _776d265b,
            name: "index"
        }
    ],
    
    
    fallback: false
  })
}

最后并没有通配符设置，所以是导致问题的原因。经测试，手动修改router再发布到nginx上是正常的，但是未免太过于麻烦。所以想请教大家这个问题怎么解决，谢谢了。

Answer 1

自己来回答一下，如果有问题，欢迎大家指出纠正

一、解决nuxt生成静态文件，动态路由会被忽略的问题

在 Nuxt.js 执行 generate 命令时，动态路由会被忽略。
可以在nuxt.config.js配置相应参数解决这个问题。配置如下

 generate: {
    routes: function () {
      return axios.get('https://my-api/users')
      .then((res) => {
        return res.data.map((product) => {
          return '/product/' + product.id
        })
      })      
    }
  }

二、解决nuxt生成的静态文件部署到nginx上的问题

1、配置nginx

 location / {
            try_files $uri $uri/ /index.html;
        }

2、配置nuxt

因为nuxt动态渲染的路由并没有渲染出"*"，结果导致404地址会显示首页内容，非404地址会调转到相应页面，所以还需要在nuxt.config.js中手动配置渲染路由

  router: {
    extendRoutes (routes) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/404.vue')
      })
    }
  }

Answer 2

不要用nginx，用nginx 也不要写这个
try_files $uri $uri/ /index.html;
而是应该用反向代理

---

path: "/product/:id?",

你nuxt里有这种路由，你生成静态文件用其他服务得自己重新实现一遍这种匹配路由，约等于实现不了
纯静态的网站才用nuxt generate
老老实实用nuxt start 建服务

Answer 3

反对另一个答案，Nuxt 结合 Nginx 并没有问题。如果使用了 spa 模式那还是要写那句 try_files 的。如果使用了静态生成，有没有那句 try_files 都可以（效果略有不同而已）。

Nuxt 有自己的错误处理机制：https://nuxtjs.org/guide/view...（见 Error Page 段）