Nuxt.js: 無法自動產生路由配置
P粉404539732
2023-08-25 13:31:01
<p>我想為我的專案產生靜態路由（<code>/contact</code>，<code>/about</code>，...）和動態路由（<code>/projectcode>/about</code>，...）和動態路由（<code>/projectcode>/project /1</code>，<code>/project/2</code>，...），以便當用戶在訪問這些路由之一時刷新頁面時，頁面仍然可以正常工作。 </p>
<p>但當執行<code>npm run generate</code>時，我只得到<code>產生的路由」/"</code>，在<code>/dist</code>資料夾中看不到產生的路由。 </p>
<p>Nuxt.js版本使用：<code>2.14.7</code></p>
<p>我試了<code>universal</code>和<code>spa</code>兩種模式，都不行。 </p>
<p>在nuxt.config.js檔案中，我在頂部加入了以下程式碼：</p>
<pre class="brush:js;toolbar:false;">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
}
</pre>
<p>然後在<code>export default {}</code>中：</p>
<pre class="brush:js;toolbar:false;">generate: {
routes: dynamicRoutes
},
</pre>
<p><br /></p>
首先，您不需要在配置中新增
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。
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
#