javascript - NuxtJS 静态生成的 HTML 页面在调用 /index.html 时不加载 Javascript
问题描述
我正在开发一个 nuxtjs 项目,该项目将为静态使用而生成。当然,它使用 Javascript 进行导航、某些表单等。
当我将页面与npm run dev一起使用时,一切正常。
使用npm run build && npm run generate导出后,我将生成的内容从 /dist 部署到我的服务器(用户请求的 CDN,在这种情况下是谷歌云存储)如果我不添加index.html,我可以毫无问题地使用该页面后缀。
例子:
访问https://page.com/subpage/工作正常
但
访问https://page.com/subpage/index.html不是真的。
是的,它使用 CSS 和 DOM 呈现内容,但 Javascript 根本不起作用。在 Google Chrome 的开发工具中,我可以看到在这两种情况下,javascript 似乎都已加载,但在第二种情况下未调用。请参阅随附的屏幕截图。两者都很相似。
关于渲染、构建配置,我的 nuxt-Config 几乎是空的。我只是禁用了 ressourceHints ,仅此而已。我不确定这是否是路由器只接受包含 index.html 的文件夹本身的问题。路由器路径是由 nuxtLinks 动态生成的。
有任何想法吗?
解决方案
更新
在搜索了大约 1-2 个小时的答案后,我终于找到了解决方案。
有一种方法可以将 index.html 后缀添加到路由器作为每个路径的别名。
通过在nuxt-config中扩展路由器,理论上可以根据router-path添加别名。这并不总是最好的方法,但在这种情况下效果很好。
router: {
extendRoutes(routes) {
routes.forEach((route) => {
// When options.generate.subFolders is true (default)
const alias =
route.path.length > 1 ? `${route.path}/index.html` : '/index.html'
// When options.generate.subFolders is false
// const normalizedRoute = route.path.replace(/\/$/, '') // Remove trailing slashes if they exist
// const alias =
// route.path.length > 1 ? `${normalizedRoute}.html` : '/index.html'
route.alias = alias
})
}
}
我从 animagnam(https://www.reddit.com/r/Nuxt/comments/gzwrqu/visiting_generated_site_routes_with_trailing/ftnylrt?utm_source=share&utm_medium=web2x&context=3)的 reddit 帖子中截取了这个,它在生产和测试中完美运行。
推荐阅读
- excel - 当代码是静态的并且控件动态创建时,控件的 VBA 用户窗体事件代码不起作用
- javascript - 需要帮助解决剪刀石头布的 Switch Case 语句
- xamarin - 为什么我在 Xamarin Forms 的 iOS 应用程序输出中收到“SecTaskLoadEntitlements failed error=22 cs_flags=200”消息?
- python - 对 50k x 50k 系统的 numpy.linalg.solve 性能改进
- java - 检查任意圆是否包含给定点集的 k 个以上的点
- opencyc - 重复的 ke-create 导致了不受欢迎的额外具体化
- python-3.x - 矢量化与非矢量化产品给出不同的结果。为什么?
- excel - Excel。日期和时间的自动单元格格式,用于更快和简化的写入过程
- postgresql - 如何在创建时在 postgres docker 映像中加载数据
- python - Pytorch 张量形状