NuxtJS静态生成的HTML页面在调用/index.html时不加载Javascript [英] NuxtJS Static generated HTML page does not load Javascript when calling /index.html

问题描述

我正在开发一个 nuxtjs 项目，该项目将为静态使用而生成.当然，它使用 Javascript 例如导航、某些表单等.

当我使用带有 npm run dev 的页面时，一切正常.

使用 npm 导出后运行 build &&npm run generate 我将生成的内容从/dist 部署到我的服务器(用户请求的cdn，在这种情况下是Google Cloud Storage)如果我不添加index.html，我可以毫无问题地使用该页面 后缀.

示例:

访问

关于渲染、构建配置，我的 nuxt-Config 几乎是空的.我只是禁用了 ressourceHints，仅此而已.我不确定这是否是路由器只接受包含 index.html 的文件夹本身的问题.路由器路径由 nuxtLinks 动态生成.

有什么想法吗?

解决方案

更新

又搜索了大约 1-2 个小时的答案后，我终于找到了解决方案.

有一种方法可以将 index.html 后缀添加到路由器作为每个路径的别名.

通过在nuxt-config中扩展router，理论上可以根据router-path添加别名.这并不总是最好的方法，但在那种情况下效果很好.

路由器:{扩展路由(路由){路线.forEach((路线)=> {//当 options.generate.subFolders 为 true 时(默认)常量别名 =route.path.length >1 ?`${route.path}/index.html` : '/index.html'//当 options.generate.subFolders 为 false 时//const normalizedRoute = route.path.replace(/\/$/, '')//删除尾部斜杠(如果存在)//常量别名 =//route.path.length >1 ?`${normalizedRoute}.html` : '/index.html'route.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)和它在生产和测试中完美运行.

I'm working on a nuxtjs project which will be generated for static usage. Of course it uses Javascript for e.g. the Navigation, some forms and more.

When I am using the page with npm run dev everything works fine.

After exporting with npm run build && npm run generate I deploy the generated content from /dist to my server (cdn requested by user, in that case Google Cloud Storage) I can use the page without any problems if I dont add the index.html suffix.

Example:

Visiting https://page.com/subpage/ works fine

but

Visiting https://page.com/subpage/index.html not really.

Yes it renders the content with CSS and DOM, but Javascript is not working at all. In the Dev-Tools of Google Chrome I can see that in both cases the javascript seems to be loaded, but not called in the second scenario. See attached Screenshots. Both were similar.

My nuxt-Config is almost empty regarding render, build-configurations. I just disabled ressourceHints and that's all. I'm not sure if this is an issue with the router only accepting the folder itself containing the index.html.. The router paths are generated dynamically by nuxtLinks.

Any ideas?

解决方案

Update

After searching for answers for about another 1-2 hours, I finally found a solution.

There is a way to add the index.html suffix to the router as an alias for each paths.

By extending the router in the nuxt-config, you can theoretically add an alias based on the router-path. It is not always the best way, but it works quite well in that situation.

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
    })
  }
}

I got this snipped from the reddit post by animagnam (https://www.reddit.com/r/Nuxt/comments/gzwrqu/visiting_generated_site_routes_with_trailing/ftnylrt?utm_source=share&utm_medium=web2x&context=3) and it works perfectly in production and tests.

这篇关于NuxtJS静态生成的HTML页面在调用/index.html时不加载Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！