Vue-cli: 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!

[hhochart29]

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.

[rpbarbati]

Not sure if this is applicable to what is being discussed, but a valid URL would not be able to start with a dot.

A dot would be valid for a file system, but a web server does not have a file system - it has URL's. / merely points to whatever is defined on the server as the root context - it most certainly does not point to a root directory of a drive. . (dot) does not point to anything on a web server (for all the web servers I have ever worked with anyway, and that is pretty much most of them) and is probably just being ignored or causing errors that result in what you think you want.

[ilyaDegtyarenko]

vue.config.js

module.exports = { publicPath: 'https://...' }

[NarasimhaA-Hexaware]

I am still facing same issue, any solution?

[parzibyte]

I had the same issue, so i made a Python Script that calls:
npm run build
And after that, it just replaces index.html contents using regular expression:

INDEX_PATH = DIST_PATH + "/index.html"
with open(INDEX_PATH, "r") as file:
    content = file.read()
content = re.sub(r"href=([a-zA-Z\.]+)", r"href=./\1", content)
content = re.sub(r"src=([a-zA-Z\.]+)", r"src=./\1", content)
with open(INDEX_PATH, "w") as file:
    file.write(content)

(it just adds ./ to the start)
I know it is not the best solution, but it works!
If you don't know Python, just make the same operations in your favorite language

[cpury]

Under the newest version, configuring the baseUrl and then running build gives me this:

 ERROR  Invalid options in vue.config.js: "baseUrl" is not allowed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1

[cornelius-agrippa]

@cpury I ran into the same problem and found your post

After searching a bit more I found out that baseUrl is deprecated in the newest versions and to use publicPath instead. Here's the reference documentation: https://cli.vuejs.org/config/#baseurl

[ghost]

@vue/cli 4.1.2

publicPath doesn't work for me

module.exports = {
  publicPath: './',
};

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=icon.png>
    <title>X</title>
    <link href=js/about.c8f61e7c.js rel=prefetch>
    <link href=css/app.a2b64800.css rel=preload as=style>
    <link href=js/app.fe175e7f.js rel=preload as=script>
    <link href=js/chunk-vendors.99d4a91b.js rel=preload as=script>
    <link href=css/app.a2b64800.css rel=stylesheet>
</head>

<body>
    <noscript><strong>We're sorry but X doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
    <div id=app></div>
    <script src=js/chunk-vendors.99d4a91b.js></script>
    <script src=js/app.fe175e7f.js></script>
</body>

</html>

[cristianvasquez]

for me, baseUrl is not allowed and publicPath is not respected,

[thefyrewire]

For anyone coming across this in the future, I was able to use ././ to force a ./ path (so I can open the site locally without a server).

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
};

<script src="./js/chunk-vendors.82980510.js">

Edit: added node env check so it can build for development too