javascript - NuxtJS 静态生成的 HTML 页面在调用/index.html 时不加载 Javascript

标签 javascript vue.js nuxt.js server-side-rendering

我正在开发一个 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 似乎都已加载,但在第二种情况下未调用。请参阅随附的屏幕截图。两者都很相似。
Dev-Tools
关于渲染、构建配置,我的 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 帖子中截取了这个,它在生产和测试中完美运行。

关于javascript - NuxtJS 静态生成的 HTML 页面在调用/index.html 时不加载 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63719727/

相关文章:

javascript - 按下按钮时在 URL 中发布数据

javascript - 在入口点自动加载 block

javascript - 在 npm 安装/更新期间自动编译文件

javascript - Vue.js 在哪里存储非组件数据属性?

javascript - 400 或 500 级别的 Http 响应

javascript - vue gallery 添加加载微调器

javascript - Firebase 错误 : We are unable to register the default service worker

javascript - 有没有办法让多个 Vue 有一个计算的监听器处理相同的值?

javascript - 如何修复套接字 io 中的 400 错误错误请求?

graphql - 不变违规 : Expecting a parsed GraphQL document