vue.jsアプリケーション内の静的資産へのパス

Question

私は、vue-cli webpackテンプレートに基づいて単一ページアプリケーションを開発しています。静的資産も使用する必要があるため、スタイルシートでそれらを参照する必要があります。

公式ドキュメントには、次のような絶対パスを使用することをお勧めします：

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

問題は、静的な資産がVUE-ローダーによって処理され、自分自身をWebPACKのため、URLが勝ったことがないということであり、最終的な出力スタイルシートに正しく設定されている必要があります。 webpack URLローダによって処理されるすべてのアセットは、あなたのpublicPath設定に応じて正しい相対URLを取得します。静的資産にも同じ効果が望まれます。

静的資産をvue.jsベースのアプリケーションと組み合わせて使用​​する方法はありますか？

更新

研究し、試行錯誤の多くの後、私は、最終的なスタイルシートと次のindex.htmlへのルートフォルダ内のスクリプトバンドルを置くことにしました。生成されたパスは正しく動作します。私はスクリプトとスタイルシートのサブフォルダを好みます（ファイルが1つしかないにもかかわらず）。しかし、私は一貫性のある有効な成果物を生成するビルドプロセスを持っています。

Answer 1

「本当の」静的資産の場合は、静的ディレクトリを使用します。

比較しても、静的/ファイルはWebpackによって処理されません。ファイルは同じファイル名でそのまま最終的な宛先に直接コピーされます。 config.jsのbuild.assetsPublicPathとbuild.assetsSubDirectoryを結合して絶対パスを使用してこれらのファイルを参照する必要があります。

ます。また、設定で、このデフォルトのパスを上書きすることができます/ index.js

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

静的に配置されたすべてのファイルは、/絶対URL /静的/ [ファイル名]を使用して参照する必要があります。 assetSubDirectoryをassetsに変更すると、これらのURLを/ assets/[filename]に変更する必要があります。