Configure nuxt.js application to work in a subdirectory on a webserver

Question

I want to deploy a static nuxt.js application (built with nuxt generate) to a subdirectory of a webserver. nuxt places the generated files in the dist directory by default:

If I start a webserver on the parent directory of the dist folder and open the page with:

http://localhost:34360/dist/

the site fails to load the script files from the domain root directory:

I've tried setting the publicPath property in the nuxt config:

build: {   publicPath: '/dist/' } 

The appplication compiles to:

Now, nuxt moves the script files one level lower (/dist/dist) and searches on root level again (/dist), thus still not finding the files

How can I configure the site, such that scripts and assets are loaded and it is self contained, no matter on which directory on my server I put it?

The issue has been covered on GitHub but the suggested hints (using publicPath) didn't work, as shown above.

Sidenote: I do not want to specify the publicPath absolut (i.e. http://localhost:8080/dist), which would work but creates new problems.

Answer 1

You need router/base

router: {   base: '/dist/' } 

Answer 2

To complete @Aldarund answer, I use :

export default { […] // some code   router: {     base:       process.env.NODE_ENV === "development" ? process.env.BASE_URL : "/<subfolder>/"   } // where <subfolder> is the subfolder! };