我想为我的项目生成静态路由(/contact,/about,...)和动态路由(/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
},
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
首先,您不需要在配置中添加
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