Nuxt.js: Tidak dapat menjana konfigurasi penghalaan secara automatik

Question

Saya mahu menjana laluan statik (/hubungi, /tentang,...) dan laluan dinamik (/projek /1< /code>, /project/2, ...) supaya apabila pengguna menyegarkan halaman semasa mengakses salah satu laluan ini, halaman itu masih berfungsi dengan betul.

Tetapi apabila melaksanakan npm run generate, saya hanya mendapat laluan yang dijana "/", dalam /dist laluan yang dijana tidak kelihatan dalam folder.

Versi Nuxt.js digunakan: 2.14.7

Saya mencuba kedua-dua mod, universal dan spa, kedua-duanya tidak berjaya.

Dalam fail nuxt.config.js, saya menambahkan kod berikut di bahagian atas:

const axios = require('axios')

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

Kemudian dalam eksport lalai {}: 
jana: {
  laluan: dynamicRoutes
},


            

Answer 1

Pertama sekali, anda tidak perlu menambah mode: 'universal'，只需添加target: 'static'以简化配置。了解更多信息 - https://nuxtjs.org/docs/2.x/features/deployment-targets/。使用ssr: true dalam konfigurasi, anda akan mendapat tapak web mod statik sepenuhnya dengan cangkuk yang berkaitan seperti yang diterangkan dalam https://stackoverflow.com/a/65208463/8153537.

Seterusnya, anda boleh mengalih keluar modul @nuxt/router. Lihat intipati saya - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d. Nuxt menjana semua laluan yang diperlukan berdasarkan struktur folder, jadi tiada konfigurasi tambahan diperlukan.

Lihat intipati ini untuk penghalaan halaman projek - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d#gistcomment-3555332.

Answer 2

router.mode='hash' 似乎与 generate.routes 配置不兼容。当 router.mode 设置为 hash 时，Nuxt 生成器会忽略 generate.routes，只创建一个用于 / 的路由，这可能是因为只期望在 hash 模式下存在首页（即 index.html menyediakan laluan yang mengendalikan semua penghalaan untuk aplikasi).

Mod cincang ini juga bercanggah dengan mod yang ditetapkan dalam router.js, tetapi jika anda benar-benar memerlukan penghalaan cincangan anda harus memilih untuk menetapkannya sahaja dalam router.jsrouter.js 中设置它，以允许处理 generate.routes untuk membenarkan pemprosesan generate.routes

.

mode='universal' 等同于 ssr=true，所以 ssr=false 的配置 在这种模式下没有意义。如果生成静态站点，你需要 ssr=true，这样可以调用任何 asyncData() 和 fetch() 钩子来填充静态页面数据。这个设置还消除了在 dynamicRoutes() 中添加 /about、/contact 和 /portfolio 的需要Juga ambil perhatian bahawa mode='universal' adalah bersamaan dengan ssr=true

, jadi ssr=konfigurasi palsu

tidak mempunyai makna dalam mod ini. Jika menjana tapak statik, anda memerlukan ssr=true supaya mana-mana cangkuk asyncData()

dan fetch()🎜 boleh dipanggil untuk mengisi data halaman statik. Tetapan ini juga menghapuskan keperluan untuk dynamicRoutes ()🎜 Menambah /about🎜, /contact🎜 dan /portfolio🎜 diperlukan 🎜🎜 kerana ia sudah termasuk dalam laluan yang dijana. 🎜 🎜🎜GitHub PR🎜🎜