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.

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,
              }
          }
      }
  }