Vue-cli: Error when using trailing slash in URL with empty string baseUrl

[chipit24]

Version

3.0.0-rc.5

Reproduction link

https://github.com/chipit24/vue-cli-routing-issue

Steps to reproduce

• Create a new project using the CLI, and make sure to include vue router.
• Create a vue.config.js file with the following contents:

module.exports = {
  baseUrl: '',
};

• Start the app using yarn serve, and navigate to /about/, for example.

What is expected?

I expect the app to load at the requested route.

What is actually happening?

A white page is being shown, with the following error in the console:

app.js:1 Uncaught SyntaxError: Unexpected token <

---

This may well be the intended behaviour, but I'm not sure why a user would intentionally set the base URL to an empty string with the expectation that a URL with a trailing slash will break the app.

I encountered this issue because I set baseUrl to process.env.VUE_APP_BASE_URL, expecting it to fall back to the default of / if it wasn't set in the environment.

[Akryum]

Is it happening with serve or build?

[chipit24]

It is happening with serve, I didn't test build.

[yyx990803]

That's not a bug. It doesn't make sense to use a relative baseUrl when you are expecting to serve the app with pushState routing. You are explicitly telling the HTML page to link to all assets using relative paths (<script src="app.js">), but the same page may get served under different nested URLs. Relative baseUrl is only meant for building hybrid apps loaded via the file protocol.

[chipit24]

I understand that; It doesn't make sense to use a relative URL, or an empty string. But, I think this behaviour should at least be documented, or if passing a falsey value, should fall back to the default value of /, no?

[yyx990803]

Empty value is valid if your index.html is only going to be served at the root, but not when you try to use history mode routing. We can mention that in the docs.

[chipit24]

Makes sense, thanks :)