Webpack and VueJs CLI v3 – Need relative path for images and web-fonts

Question

Using: Vue CLI 3.0.0-rc.3

How can I config my app, that it is loading the A) css itself, B) the fonts loaded in css and C) the images from a relative path depending to the parent-folder the app is located?

My complete vue app is currently running without extra webpack config file. I already know, I would need to create a webpack.config.js, but I don't know what plugins or configuration is necessary.

The app is full functional under absolute path http:whatever.local/ of course.

But I need to deliver the app complete independent from absolute path, so customer can use it under folder structure he wants and I don't know jet. http:customerssite.com/i-dont-know-his-structure/vue-app/ (I just don't know).

Thank you very much.

Ansela

Answer 1

The described situation contains two different problems:

1) Relative Path to assets at all.

To have the web-app functional in every nested folder, you need to load all assets from relative starting point.

Solution: baseUrl = './' (the folder itself, were the html starts loading the vue app.)

Documented here: https://cli.vuejs.org/config/#baseurl

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

2) ignore url paths in css-loader

To be able to use relative paths in the urls used in css for images and fonts, you need to avoid that the css-loader (webpack) is trying to manipulate/controll your used urls.

Solution: Configure this css-loader with option url: false. And just use the relative url, that starts from the folder were the html starts loading.

Documented here: https://cli.vuejs.org/guide/css.html#css-modules

 module.exports = {
    baseUrl: './',
       css: {
         loaderOptions: {
            css: {
               url: false,
              }
          }
      }
  }

Ansela

When I use baseUrl: './' in vue.config.js I get an error in the console saying it can't find the favicon.ico file every time I change the route/view (i.e click a link). It seems that it's looking for a new favicon.ico file relative to every route. i.e /shop and /basket both request new favicons. – Pidgin

baseUrl is deprecated now and we can now use publicPath instead. – Guano

Answer 2

You can play with baseUrl and assetsDir parameters

Amsden

Change the baseUrl to get relative located web-app running, was the correct hint, of course. But I had a second issue with the css-loader, that made problems while compiling. Thank you. – Ansela

Answer 3

You can create a file called vue.config.js This allow configuration of a public path. Take a look at https://cli.vuejs.org/config/#configuration-reference

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

where the '/production-sub-path/' is the relative path to your app

Rositaroskes