Path to static assets in vue.js application

Question

I am developing a single page application based on the vue-cli webpack template. Since we have to use static assets as well, we need to reference them in our stylesheet.

The official documentation recommends to use an absolute path like the following one:

background-image: url('/assets/images/lo/example2.svg');

The problem is, that static assets won't be processed by the vue-loader and webpack itself, so the urls won't be set correctly in the final output stylesheet. All assets that will be processed by the webpack url-loader will get the correct relative url depending on your publicPath configuration. The same effect is desired for static assets.

Do you have any idea how to use static assets in combination with a vue.js-based application?

Update

After researching and a lot of trial and error I've decided to place the final stylesheet and the script bundle inside the root folder next to the index.html. The generated paths will work properly. Not the most optimal solution, since I prefer subfolders for scripts and stylesheet (despite they contain only one file). But nevertheless I have a build process that generates consistent and valid artifacts.

Answer 1

For "real" static assets, use the static directory.

In comparison, files in static/ are not processed by Webpack at all: they are directly copied to their final destination as-is, with the same filename. You must reference these files using absolute paths, which is determined by joining build.assetsPublicPath and build.assetsSubDirectory in config.js.

You can also overwrite this default path in config/index.js

module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

Any file placed in static/ should be referenced using the absolute URL /static/[filename]. If you change assetSubDirectory to assets, then these URLs will need to be changed to /assets/[filename].