Vue CLI deploy to a subfolder using relative paths

Question

Using Vue CLI, and Vue 2.

Anyone knows how to build the project using relative paths, so I can place it in any subfolder in my server and it will work? (for example www.mysite.com/subfolder/)

I've tried with

// vue.config.js
module.exports = {
  publicPath: "",
};

And it builds the paths relative (ie, js/app.js instead of /js/app.js), but the app wont' load. Nothing shows on the page.

Strangest thing is that all files are loaded correctly (I can check on network tab in Chrome devtools), no JS errors, etc. So the page is loading all the files but it seems like it's refusing to mount the app when using relative paths.

I know that I can add the absolute path to the build process but that's not what I need. My client needs to be able to move the files freely from one subfolder to another and the app should work without the need to recompile

PS: Also tried building the project with Vite and Vue 3, same problem.

Thanks!

Answer 1

Alright, looks like all that's needed is:

1. build with a relative publicPath (empty string)

// vue.config.js
module.exports = {
  publicPath: "",
};

2. add a <base> tag to the final HTML...

<base href="/subfolder/" />

For Vite, the export should be

// vite.config.js
export default {
  ...
  base: "",
};