Vue app not at root folder

I have just deployed my first ever Vue app.

But it didn’t work. When I opened browser console, there were multiple errors when opening index.html about not able to load js and css files.

The path was wrong, they pointed to files at the /js and /css folders at the root, which don’t exist.

So I manually edited the index.html, whenever I found href or src that starts with a slash, I removed the slash:

<link rel=icon href=favicon.ico>
<link href=css/chunk-vendors.c580d68a.css rel=preload as=style>
<link href=js/app.02f96af3.js rel=preload as=script>
<link href=js/chunk-vendors.f4a6b8ab.js rel=preload as=script>
<link href=css/chunk-vendors.c580d68a.css rel=stylesheet>
<script src=js/chunk-vendors.f4a6b8ab.js>
<script src=js/app.02f96af3.js>

After the slash removal, the application works!

Anybody know why as a default Vue put slash at the beginning of paths?
Can I change the build process to not add slash in the beginning of paths?

Maybe this helps you: How to Set Root/Base URL for a VueJS Project

1 Like

Thanks!

Actually I have seen that discussion before. At that time I thought putting the location of the deployment folder into the source code feels like coupling deployment concern with development concern. Also the app may be deployed in more than one instance under different folder. So this trick can help me deploy but I considered it as a workaround and I was looking for a better way.

But it turned out the information on that discussion is a bit outdated. I found a more recent documentation about it in Vue CLI Configuration Reference:

https://cli.vuejs.org/config/#publicpath

that addresses exactly my concern. We should use publicPath instead of baseUrl and it turned out I can put empty string (or ./) as the value so all assets will be linked using relative path!

  1. Add vue.config.js at the root folder next to package.json.

  2. vue.config.js content:

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

My other question was also addressed:

Because relative path can cause issues when used in combination with history.pushState or multi-paged app.

Since I’m using vue router hash mode and creating single page app, then I will have no problems using relative path.

1 Like