Nuxt.js: 無法自動產生路由配置

Question

我想為我的專案產生靜態路由（/contact，/about，...）和動態路由（/projectcode>/about，...）和動態路由（/projectcode>/project /1，/project/2，...），以便當用戶在訪問這些路由之一時刷新頁面時，頁面仍然可以正常工作。

但當執行npm run generate時，我只得到產生的路由」/"，在/dist資料夾中看不到產生的路由。

Nuxt.js版本使用：2.14.7

我試了universal和spa兩種模式，都不行。

在nuxt.config.js檔案中，我在頂部加入了以下程式碼：

const axios = require('axios')

const dynamicRoutes = async () => {
  const routes = await axios.get('http://my-project.com/wp/wp-json/projects/v1/posts')
    .then(res => res.data.map((project) => `/project/${project.ID}/${project.post_name}`))
    .then(res => res.concat(
      [
        '/about',
        '/contact',
        '/portfolio'
      ]
    ))
  return routes
}

然後在export default {}中：

generate: {
  routes: dynamicRoutes
},

Answer 1

首先，您不需要在配置中新增mode: 'universal'，只需新增target: 'static'以簡化配置。了解更多 - https://nuxtjs.org/docs/2.x/features/deployment-targets/。使用ssr: true，您將獲得完全靜態模式的網站，並且具有相關的鉤子，如https://stackoverflow.com/a/65208463/8153537中所述。

接下來，您可以刪除@nuxt/router模組。看看我的gist - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d。 Nuxt會根據資料夾結構產生所有所需的路由，因此不需要額外的配置。

查看此gist以獲取專案頁面路由 - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d#gistcomment-3555332。

Answer 2

router.mode='hash' 似乎與 generate.routes 設定不相容。當router.mode 設定為hash 時，Nuxt 產生器會忽略generate.routes，只建立一個用於/ 的路由，這可能是因為只期望在hash 模式下存在首頁（即index.html 設定了一個路由，該路由處理應用程式的所有路由）。

這個雜湊模式也與router.js 中設定的模式 衝突，但如果你真的需要雜湊路由，你應該選擇只在router.js 中設定它，以允許處理generate.routes。

也要注意mode='universal' 等同於ssr=true，所以ssr=false 的配置 在這種模式下沒有意義。如果產生靜態站點，你需要 ssr=true，這樣可以呼叫任何 asyncData() 和 fetch() 鉤子來填入靜態頁面資料。這個設定也消除了在dynamicRoutes() 中加入/about、/contact 和/portfolio 的需求，因為它們已經包含在產生的路由中。

GitHub PR

#