Vue CLIでビルドしたら背景画像のパスが合わず表示されない

問題点

単一コンポーネント（.vueファイル）内のstyleタグ内に指定した背景画像のパスが、distされたら合わなくなってうまく表示されない。

適用したいCSS

background-image: url("./assets/images/sample.jpg");

開発環境であればもちろんこれで問題なく表示されるが、ビルド ⇨ distされたファイルを確認するとCSSにこのパスがそのまま適用されてしまうため、背景画像が表示されない問題が発生。

解決策

まず、画像のパスを以下のように定義。export文の上あたりに記述すればOK。
（※ @/のあとはsrcより下の階層のパス）

scriptタグ内

import src from '@/assets/images/sample.jpg';

適用したい要素に定義したパスを直接記述する。

templateタグ内

<div class="bg-image" v-bind:style= "{ 'background-image':' url(' + src + ')' }">

結果

distされた背景画像のパスを見ると・・・

distされたindex.html

<div class="bg-image" style="background-image: url('./assets/img/sample.e25529e.jpg');">

これできちんと背景画像が表示された。

ちょっと面倒だが、このままサーバーにアップしてもうまく表示されたのでとりあえずこれで問題ないかな。