在 Netlify 中配置 gridsome 的动态路由

类似 /post/:id 这样的动态路由，在 gridsome 中 build 之后会生成 /post/_id.html 的文件，并不会主动的进行路由映射，这时候需要我们主动的在 Netlify 上进行配置。

首先在 gridsome.server.js 里加入下面的方法

点击查看代码

api.afterBuild(({ redirects }) => {
  for (const rule of redirects) {
    // rule.from   - The dynamic path
    // rule.to     - The HTML file path
    // rule.status - 200 if rewrite rule
    console.log(rule)
  }
})

然后执行 npm run build 或 yarn build，在生成 dist 目录的同时会在控制台打印出需要配置的动态路由，以 /post/:id 为例，会打印出 { from: '/post/:id', to: '/post/_id.html', status: 200 } 这条信息。

接着在根目录新建 netlify.toml 文件，这个就是 Netlify 的配置文件，在文件中添加下面的信息

点击查看配置

[[redirects]]
  from = "\/post\/:id"
  to = "\/post\/_id.html"
  status = 200

不难发现，配置的信息就是 build 时在控制台打印出来的信息。

最后发布，动态路由就配置好了。

参考资料

• Gridsome Dynamic Routing
• Netlify Redirects and rewrites