微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决NuxtJS静态生成的HTML页面在调用/index.html时不加载Javascript

我正在开发一个nuxtjs项目,该项目将为静态使用而生成。当然它使用Javascript例如导航,一些表格等等。

当我在 npm run dev 中使用该页面时,一切正常。

使用 npm run build && npm run generate 导出后,我将/ dist生成内容部署到我的服务器(用户要求的cdn,在这种情况下为Google Cloud Storage),我可以使用该页面而无需如果不添加 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: {
  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帖子中删除了此消息,它在生产和测试中都非常有效。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?