Add baseUrl option in vue-cli-service build command

[ThibaudCrespin]

What problem does this feature solve?

When you deploy on gh-pages, the base url is not the good one, it takes the root, not the repository. So I suggest to add on option to the cli command that will simply change relative urls in the vue application.

What does the proposed API look like?

vue-cli-service build --baseUrl

[zentby]

Agree. Or just use a relative path for the src URL so that it can also support preview the HTML in anyone's local browser:

When run

vue build

get

    <script src=js/app.e46b869a.js></script>

instead of

    <script src=/js/app.e46b869a.js></script>

[zentby]

My bad. It can be resolved with vue.config.js within the same folder:

module.exports = {
    baseUrl: './'
}

@ThibaudCrespin I guess you can solve your issue with this one as well.

[uxweb]

@zentby @yyx990803

Hi,

I am using baseUrl with . value because the app can be deployed under any subdirectory of a webserver.

This is making webpack put all dependencies (js/css/sourceMaps) at the root of the dist directory.

Is this the intended behavior?

I was expecting having my js assets inside a js directory as well as my css assets inside a css directory.

This is the content of my vue.config.js:

This is the content of my index.html after building for production:

am I missing something here?

Thanks!

[zentby]

@uxweb

I'm not sure if it's a bug or intended. The path prefix will be eliminated if baseUrl is set:

if (
    placeAtRootIfRelative &&
    !(/^https?:/.test(options.baseUrl)) &&
    options.baseUrl.charAt(0) !== '/'
  ) {
    return filePath.replace(/^\w+\//, '')
  }
  return options.assetsDir
    ? path.posix.join(options.assetsDir, filePath)
    : filePath

The return filePath.replace(/^\w+//, '') will remove the leading 'js' or 'css'

[ebastuart]

I am using the latest version and it still doesn't work. When I set the baseUrl to './' it will be ignored.
Please help!

[hhochart]

Can you try with this in vue.config.js :

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? './' // prod
    : '/', // dev
   }

[ebastuart]

Didn't help. No change.

[y-nk]

is there any lead to solve this bug ?

[shannonsands]

Same issue. Having to manually run a find & replace.

[hello2parth]

I am still facing the issue. I have used below code to remove '/' and made my application workable.

module.exports = {
    baseUrl:''
  }

With the above code, My application is running but some of css and js files are not getting the correct relative path for production build.

[hello2parth]

@uxweb

I'm not sure if it's a bug or intended. The path prefix will be eliminated if baseUrl is set:

if (
    placeAtRootIfRelative &&
    !(/^https?:/.test(options.baseUrl)) &&
    options.baseUrl.charAt(0) !== '/'
  ) {
    return filePath.replace(/^\w+\//, '')
  }
  return options.assetsDir
    ? path.posix.join(options.assetsDir, filePath)
    : filePath

The return filePath.replace(/^\w+//, '') will remove the leading 'js' or 'css'

May I know where to use this configuration? can you please give in detail code for the same (I mean, dir-->filename --> objName. etc )

[cawoodm]

IMHO it's just wrong and unnecessary that vue build defaults to /. Using ./ would make the built application work just as well hosted in root as from any other subdirectory. It would also fix issues with other platforms (e.g. NWJS) which are not served via HTTP.