web-dev-qa-db-ja.com

WebpackとVueJsCLI v3 –画像とWebフォントの相対パスが必要

使用：Vue CLI 3.0.0-rc.3

アプリを設定するにはどうすればよいですか？A）css自体、B）フォント cssに読み込まれ、C）画像相対パスからアプリが配置されている親フォルダーに応じて？

私の完全なvueアプリは現在、追加のwebpack構成ファイルなしで実行されています。webpack.config.jsを作成する必要があることはすでにわかっていますが、必要なプラグインまたは構成がわかりません。 。

もちろん、アプリは絶対パスhttp:whatever.local/の下で完全に機能します。

しかし、絶対パスから完全に独立したアプリを提供する必要があるので、顧客は希望するフォルダー構造でアプリを使用でき、jetはわかりません。 http:customerssite.com/i-dont-know-his-structure/vue-app/（わかりません）。

どうもありがとうございました。

webpackvue.jsrelative-pathvue-cli
4
Herr_Hansen

説明されている状況には、2つの異なる問題が含まれています。

1）アセットへの相対パス。

ネストされたすべてのフォルダーでWebアプリを機能させるには、相対的な開始点からすべてのアセットをロードする必要があります。

解決策：baseUrl = '。/'（フォルダー自体、htmlがvue app。）

ここに記載されています： https://cli.vuejs.org/config/#baseurl

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

2）css-loaderのURLパスを無視します

Cssで使用されているURLで画像やフォントの相対パスを使用できるようにするには、css-loader（webpack）が使用済みのURLを操作/制御しようとするのを避ける必要があります。

解決策：このcss-loaderをオプションurl: falseで構成します。そして、htmlがロードを開始したフォルダーから始まる相対URLを使用します。

ここに記載されています： https://cli.vuejs.org/guide/css.html#css-modules

 module.exports = {
    baseUrl: './',
       css: {
         loaderOptions: {
            css: {
               url: false,
              }
          }
      }
  }
8
Herr_Hansen

baseUrl および assetsDir パラメーターで遊ぶことができます

1
IVO GELOV