Vue-cli: Relative paths destroy CSS urls when building an app

[m-mohr]

Version

3.0.0-beta.6

Reproduction link

https://github.com/m-mohr/vue-cli-relative-urls-issue

Steps to reproduce

I'd like my app (that uses the fontawesome library) to be able to run in a sub-directory (http://host/user/myapp), not at the root folder of a webspace (http://host). At time of running the build script it is not clear which directory the app resides in.

The default configuration of vue-cli (empty vue.config.js) works as expected in the root directory only, but when moving the app into a sub-folder the browser can't find the files as they are generated using absolute paths, e.g. /css/somefile.css. Therefore I tried to set a relative path as follows:

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

Alternatively, I tried a vue.config.js with the following content:

module.exports = {
  configureWebpack: {
    output: {
      publicPath: "./"
    },
  }
}

Both resulted in the same issue.

Reproduce by:

1. Run npm run build
2. Place the content of the dist directory on any server.
3. Try to open the app in a browser. It won't show the ambulance car icon.

Clearing the vue.config.js, rebuilding and placing the dist directory content in the root of the server will work. Alternatively, this could easily be shown by running npm run serve after clearing the vue.config.js.

What is expected?

Setting a relative URL should be possible without breaking the app. The ambulance car should be shown. In the end CSS url declarations need to be declared as follows: (url(../fonts/fontfile.ttf))

What is actually happening?

Setting a relative URL is breaking the app. The ambulance car is not shown, instead a rectangle is shown. The problem is that the fonts of font-awesome are placed under ./fonts/... and the CSS files reference them as fonts/..., e.g. (url(fonts/fontfile.ttf)) As CSS files are referring to files relative to their own location, the font files can't be found.

[yyx990803]

You should set baseUrl to /host/user/myapp/. That's the intended usage.

[LinusBorg]

As a sort of general advice: relative paths willl be brittle in many situations, especially once you want to use vue-router with history mode.

If you are set on making it work somehow, you will have to solve this with the tools font-awesome gives you, namely the scss source files.

You can try them on their own, since they already have set a dynamic path for their fonts: ../fonts

https://github.com/FortAwesome/Font-Awesome/blob/fa-4/scss/_variables.scss#L4

If that doesn't work, you could overwrite that variable to get the path right.

[m-mohr]

@LinusBorg I am aware of that and I'll not use vue-router. Therefore the only problem is that the generated CSS urls are wrong. As you have shown with your example (../fonts), the paths defined by font awesome are correct. They get destroyed once vue-cli is running over them with a relative url as baseUrl / publicPath.

It seems I need to get rid of vue-cli as it doesn't support what I need.

[yyx990803]

@m-mohr ...this is not a vue-cli issue. Even if you use plain webpack + css-loader, you'd have the same problem by setting output.publicPath to a relative path. The while point is, publicPath is not meant to be relative. You set it to the subpath you want to deploy to, then you build and deploy. This means you need to know which subpath you want to deploy to before you build, which is the case most of the time.