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

按照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上是正常的,但是未免太过于麻烦。所以想请教大家这个问题怎么解决,谢谢了。

回答:

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

一、解决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')
      })
    }
  }

回答:

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


path: "/product/:id?",

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

回答:

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

Nuxt 有自己的错误处理机制:https://nuxtjs.org/guide/view…(见 Error Page 段)

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注