When I deployed a site created with Nuxt.js SSG to Firebase Hosting, I got a Page Not Found error.

Structure of Application

Sites created with SSG are configured to generate index.html in a subdirectory.

Reference: Nuxt - Nuxt configuration file

Also, the query was not recognized correctly when started on the local server at build time (because of the trailing slash). To solve this, add a setting to remove the trailing slash.

Reference: Nuxt - The router Property

Error

index.html exists under a subdirectory. The page was displayed when initially connected, but the above error is displayed when reloading, as if the path is not recognized properly.

When running on a local server, the page functioned correctly even after reloading.

Setttings of Firebase

Locally, the behavior is correct, so it may be possible to change the Firebase configuration to accommodate this.

First, add a rewrites setting to link the page routing to the file to be called. Regular expressions can also be used.

Next, change the configuration to disable trailing slashes in URLs. This is not required.

(The site I created was using query parameters, so I had a problem with the trailing slash that would not work at the same time.)

{
  "hosting": {
    "public": "dist",
    "rewrites": [{ "source": "**", "destination": "/index.html" }],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "trailingSlash": false
  }
}

Reference: Configure Hosting behavior  |  Firebase Hosting

Instead of generating index.html under a subdirectory with Nuxt.js, it is possible to generate it as <page>.html.

Firebase Hosting will by default route files with .html extensions without .html when displaying them.

Therefore, the appearance on Firebase Hosting does not change regardless of which configuration is used in Nuxt.js.