Deploy VueJS App in a subdirectory

Question

I'm experiencing problems deploying a Vue JS app built using the Webpack CLi to work.

If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.

I've added a base href:

    <base href="/dist/">

And the scripts load, but all the asset paths created by Webpack are broken, the images and fonts don't load as they are pointing to the root directory.

Can anyone please help?

Answer 1

If you installed your app with

npm install -g @vue/cli vue ui then you should create file vue.config.js in the top project folder (where package.json is) and paste like above.

Answer 2

Assuming you are using the webpack template from vue-cli, you need to edit the assetsPublicPath property in config/index.js - notice there is one for build and for dev

Check out Handling Static Assets section in the docs for more info.

Update:

Newer link for CLI v3+ users: https://cli.vuejs.org/guide/html-and-static-assets.html

Notice the property is just called publicPath

Answer 3

For Vue CLI 3 it is pretty simple.

Edit your vue.config.js (if there is none, create it in project root directory) and add following lines:

module.exports = {
  baseUrl: "./"
};

Or whatever sub-directory you want.

You may also decide according to NODE_ENV. See the docs.

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

UPDATE

As mentioned in comments below, for Vue CLI 3.3+ use publicPath property instead of baseUrl.