Add publicPath type of option to generate

[jiv-e]

Hi!

I tried to publish generated Nuxt page to Github pages. It is served from a subdirectory: username.gihub.io/projectname. This causes 404s because asset references start with '/'. For example _nuxt folder:
Failed to load resource: the server responded with a status of 404 (Not Found) /_nuxt/1.nuxt.bundle.5b7c88cf02a549fbbf73.js

The path should be: /projectname/_nuxt/1.nuxt.bundle.5b7c88cf02a549fbbf73.js
Or: https://username.gihub.io/projectname/_nuxt/1.nuxt.bundle.5b7c88cf02a549fbbf73.js

I couldn't find any good workaround.

It seems that $ nuxt build has a publicPath option that allows changing the dist folder location. It would be great to have similar option for $nuxt generate also. Default could be '/' but changing it to '/projectname/' would solve the problem in Github pages case. This path should also be prepended in the head section of nuxt.config.js where references to local files are made.

_{This question is available on Nuxt.js community (#c917)}

[pi0]

Hey. You have to use router.base

[jiv-e]

Great, thanks!

[sen0rxol0]

Having the same problem i guess...
the publicPath should not be absolute when generated, the trailing slash is always added.

i currently have publicPath: 'app/' but it will generate to src='/app/1.app.js.

the thing is publicPath is expected to be a url or absolute path when served, since in a server the url will be parsed, app/ or /app/ will parse to https://app.dev/app/

i thought maybe providing a empty string as router base would solve it but it didn't, guess no way of testing it locally !

[breath103]

one other problem with is that this also affects fragment routing such as <a href="#id"></a>
this won't work unless you do something like <a href="/currentPath#id"></a>, which is silly and complicated i have to say.

[pi0]

This might be useful:

https://github.com/IBM/vue-a11y-calendar/blob/master/docs/nuxt.config.js

[MartinX3]

I need to set a publicPath.
Just setting the router base isn't enough.
It need to be /_nuxt/ for netlify
and it need to be the absolute address, if I build it on travis-ci for gh-pages.
How to do that dynamically?

[aldarund]

@MartinX3 in build extend
config.output.publicPath = `https://s3.${awsRegion}.amazonaws.com/${awsS3AssetsBucketName}/

[MartinX3]

@aldarund
Thank you, but I don't use amazon.
There I implemented a working solution:
https://github.com/MartinX3/nuxt-starter

[cdunlap]

Has anybody found a way to set this to a relative path so, say, a client can drop the static files wherever they want on their web server and they work without having to rebuild the project? I'm in a situation where I don't know what path will be used, so I have to use relative paths.

[evry-johber]

@cdunlap Use a relative path in config.output.publicPath in your nuxt config, e.g.

build: {
  extend(config, ctx) {
    if(!ctx.isDev) {
      config.output.publicPath = '_nuxt/'
   }
}

[cdunlap]

@evry-johber That appears to break ~/assets paths in CSS now because of the resulting double _nuxt after path resolution: _nuxt/_nuxt. The CSS is located in the _nuxt directory already so adding a relative _nuxt path to asset urls in the CSS produces _nuxt/_nuxt when it is resolved.

Here's the path in SCSS: url('~/assets/fonts/Neo Sans Pro Medium.ttf'); and here's the output in main.css: _nuxt/fonts/Neo Sans Pro Medium.c38f2cc.ttf. So now the browser looks for _nuxt/_nuxt/fonts/Neo Sans Pro Medium.c38f2cc.ttf, causing broken fonts in my case.

Its a step in the right direction for sure, but it doesn't seem to be the full solution.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.