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.

Solution 1

You need router/base

router: {
  base: '/dist/'
}

Solution 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!
};

Comments

[Marc]

This is what I was searching for! Thank you! And is there a way to configure this generically, i.e. in a the app could be moved to /xyz/ without requiring changing the config and rebuilding?

[Aldarund]

without rebuilding i dont think so. maybe only via some 3rd party module. As for dynamically you could do it in nuxt.config build.extend

[Marc]

Thank you, I will fo with your solution for now!

[h3nr1ke]

for future needs, here is the documentation about router base configuration nuxtjs.org/docs/2.x/configuration-glossary/configuration-rou‌​ter

[Earth_Believer]

This is what I was looking for. Ty.