NuxtJS Static generated HTML page fails to load JavaScript while accessing /index.html

I'm currently working on a project using Nuxt.js to generate static content, which involves utilizing JavaScript for tasks such as navigation and form functionality.

Everything works smoothly when running the page with npm run dev.

However, after exporting the content with npm run build && npm run generate and deploying it to my server (CDN specifically requested by the user, in this case Google Cloud Storage), I encounter an issue where accessing the page without the index.html suffix works perfectly fine.

For example:

Visiting functions correctly

but

Accessing doesn't work properly.

The page displays CSS and DOM elements, but the JavaScript functionalities are not operational. In the Google Chrome Dev-Tools, I noticed that although the JavaScript files appear to be loaded in both cases, they are not executed under the second scenario. Attached screenshots show similarities between the two situations.

https://i.stack.imgur.com/DpEFg.png

My Nuxt configuration is quite minimal in terms of render and build settings, with only resourceHints disabled. I suspect that the issue might be related to the router's handling of accepting only folders containing the index.html file. The router paths are dynamically generated through nuxtLinks.

Any suggestions or insights would be greatly appreciated?

javascriptvue.jsnuxt.jsserver-side-rendering

Answer №1

Latest Update

After spending an additional 1-2 hours searching for solutions, I ultimately stumbled upon a resolution.

I discovered a technique to include the index.html suffix to the router as an alias for all paths.

By expanding the router within the nuxt-config file, it is possible to create an alias based on the router path. While this may not always be the ideal approach, it proved to be quite effective in this particular scenario.

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

This valuable snippet was sourced from a 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 has proven to function flawlessly in both production and testing environments.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Convert checkbox choices to strings stored in an array within an object

I have a intricate object structure JSON{ alpha{ array1[ obj1{}, obj2{} ] } } In addition to array1, I need to include another array: array2 that will only consist of strin ...

javascriptarraysangulartypescriptangular8

Filter the ng-repeat list dynamically by triggering ng-click event

I am currently developing an application on that requires users to be able to filter a list of credit cards by clicking on filters located on the interface, such as filtering for only Amex cards or cards with no fees. Although I have successfully bound t ...

javascriptjqueryangularjsfilter

Steps to enable Nodemailer to execute a separate .js script

Currently, I have the main nodejs server file named myserver.js const express = require("express"); const app = express(); const nodemailer = require("nodemailer"); const port = 80; const vectorExpress = require("./node_modules/@ ...

javascriptnode.jsexpressnodemailer

Leveraging underscore.js for null verification

let name = "someName"; if(name !== null) { // perform some action } Currently, I am utilizing http://underscorejs.org/#isNull. How can I achieve the same functionality using underscore.js? Is there any noticeable performance enhance ...

javascriptunderscore.js

Unable to open javascript dialog box

One issue I encountered involves a jqGrid where users have to click a button in order to apply any row edits. This button is supposed to trigger a dialog box, which will then initiate an ajax call based on the selected option. The problem lies in the fact ...

javascriptjqueryajaxjqgridmodal-dialog

What are the drawbacks of implementing two-way binding between a parent component and a child component in a software system?

Lately, I have been focused on AngularJS development but recently I started exploring Vue.js and going through its guide. On one of the pages, I came across the following: By default, all props form a one-way-down binding between the child prope ...

javascriptangularjsvue.js

Utilizing CSS for styling a class with a dynamic name

On the server side, I am dynamically generating class names like this: <p class="level_1">List item 1</p> <p class="level_2">List item 2</p> <p class="level_3">List item 3</p> <p class="level_1">List item 1</p& ...

javascriptjquerycss

Validation of JSON Failed

Encountered a 400 Bad Request error while attempting to POST an answer using Postman, it appears to be a validator issue. Despite multiple attempts, I have yet to resolve this issue. Below are details of the JSON data being sent in the POST request along w ...

javascriptjsonnode.js

What is the best way to hide or show child elements within dynamically added components that are created using v-for loop in Vue.js

In this code snippet, there is a header text and some child elements. The goal here is to have the child elements toggle (hide/unhide) when the header is clicked. For instance, clicking on Spanish01 should hide all its children, and clicking it again shoul ...

vue.js

Ways to remove a task in ReactJs agendas?

I am currently working on a code to delete an item from a list. However, I have encountered a problem where it is deleting items in a FIFO order instead of according to the index. export default class Todo extends Component{ constructor(){ supe ...

javascriptreactjs

Encountering an issue with Vuex action dispatch when using electron

I'm currently working on an Electron app with Vuex. The store is set up for the entire application using modules. One of my test modules is Browser.js: export default { namespaced: true, state: { currentPath: 'notSet' }, mutatio ...

javascriptvue.jselectronvuexvuex-modules

For Firefox, the status code always comes back as 0 when using xmlhttprequest

When attempting to make asynchronous calls using the xmlhttprequest object, everything functions perfectly in Internet Explorer. However, Firefox seems to be encountering issues. Here is a snippet of the problematic code: if (req.readyState == 4) { i ...

javascriptajaxasp.net-ajaxxmlhttprequest

How can I link to a different field in a mongoDB Schema without using ObjectID?

I have created two schemas for books and authors: const bookSchema = new mongoose.Schema({ title: String, pages: Number, description: String, author: { type: mongoose.Schema.Types.ObjectId, ref: 'Author' } }); const Book = mongoose.model ...

javascriptnode.jsreactjsmongodbmongoose

Experiencing difficulties when attempting to send a cookie to the server

Why is the vue+axios frontend not sending cookies to my php server in the request header? I am currently in the process of migrating an old project to a new server. After making some optimizations to the project architecture, everything worked perfectly f ...

phpvue.jsaxiosthinkphp

Upgrade from Vuetify 2 to Vuetify 3, new changes including the elimination of v-list-item-content and v-list

I'm currently in the process of upgrading from Vuetify/Vue 2 to Vue 3. As someone who is not primarily a front-end developer, I have been tasked with updating some older code to ensure everything continues to work smoothly. However, I've run into ...

cssvue.jsvuejs3vuetify.jsvuetifyjs3

I am curious to understand the reasons behind the occurrence of this ID problem

When I format my code like this const title = document.getElementById("title"); function handleClick() { title.style.color = "red"; } title.addEventListener("click", handleClick); everything works fine. However, if I c ...

javascript

Is there a way to conceal a div class on the Payment page in Shopify?

I have encountered an issue with the code on the Shopify checkout (Payment) Page. Unfortunately, I am unable to directly edit this page within Shopify, but I have discovered that it is possible to add custom CSS or HTML code within the checkout settings of ...

javascripthtmlcssshopifyshopify-template

The absence of PHP GET variable being set

I am encountering an issue with my registration php class. It is designed to display a form and upon clicking the registration button, it triggers a function in a login javascript file. This JavaScript file utilizes ajax to send data to an index.php file. ...

javascriptphpjqueryajaxhtml

What is the best method for iterating through an array and generating a glossary list organized by categories?

I have an array filled with definitions. How can I use Vue.js to iterate through this array and create a glossary list organized by letters? Desired Output: A Aterm: A definition of aterm B Bterm: A definition of bterm C Cterm: A definition of cterm ...

javascriptarraysvue.jsloopsvuejs2

The functionality of `config.assets.debug = true` fails to

I've encountered an issue with the configuration on development where config.assets.debug = true doesn't seem to work correctly. Instead of having multiple separate JavaScript and CSS file inclusions, I'm getting a consolidated one: <li ...

javascriptcssruby-on-rails