CODEWITHSUNDEEP
webpackvue.jsvuejs2
Harry
Harry

Reputation: 497

Deploy VueJS App in a subdirectory

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?

Upvotes: 41

Views: 40754

Answers (4)

treecon
treecon

Reputation: 2835

For Vue 3 projects scaffolded with Vite, edit the vite.config.js file, adding/changing the base property as following:

export default defineConfig({
  /* ... */

  base: './',

  /* ... */
})

Upvotes: 2

jedik
jedik

Reputation: 1244

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.

Upvotes: 46

Matt
Matt

Reputation: 44058

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

Upvotes: 43

Franz Anton Mesmer
Franz Anton Mesmer

Reputation: 57

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.

Upvotes: 2

Related Questions