CODEWITHSUNDEEP
vue.jsnuxt.js
Marc
Marc

Reputation: 13194

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

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:

default output

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:

404 Default

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

build: {
  publicPath: '/dist/'
}

The appplication compiles to:

output with publicPath

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

error with publicpath

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.

Upvotes: 30

Views: 22533

Answers (3)

mmoya
mmoya

Reputation: 2198

In Nuxt 3.0 use config's app.baseURL or NUXT_APP_BASE_URL environment variable.

Upvotes: 6

MickGe
MickGe

Reputation: 141

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

Upvotes: 7

Aldarund
Aldarund

Reputation: 17621

You need router/base

router: {
  base: '/dist/'
}

Upvotes: 37

Related Questions