/ / Webpack less-loader Brakująca ścieżka podstawowa w kompilacji produkcyjnej - javascript, webpack, vue.js

Webpack less-loader Brakująca ścieżka podstawowa w kompilacji produkcji - javascript, webpack, vue.js

Mam aplikację vue-js, która korzysta z pakietu internetowego, wszystko działa dobrze w środowiskach programistycznych i testowych, ale mam problem z jej skompilowaniem do produkcji.

Mam obrazy tła w plikach LESS. Pliki obrazów są w /static. (Nie jestem pewien, czy to koszer, czy też powinni być po stronie src/assets.)

W każdym razie, gdy LESS ma coś takiego:

 background-url: url("/static/img/foobar/my-image.svg")

Następnie skompilowany CSS będzie miał ten sam adres URL

 background-url: url("/static/img/foobar/my-image.svg")

Gdy przeglądarka ładuje, nie może znaleźć pliku imgate. Przeglądarka próbuje znaleźć plik tutaj:

file:///static/img/foobar/my-image.svg

Czy ktoś może polecić sposób na wstąpienie w ścieżkę bezwzględną, gdy aplikacja będzie produkować do produkcji?

Odpowiedzi:

1 dla odpowiedzi № 1

Czy masz swoje zasoby statyczne poza katalogiem projektu? /static ? W przeciwnym razie nie rozumiem, dlaczego przeglądarka próbuje złożyć wniosek file:///static/img/foobar/my-image.svg

w każdym razie twoje aktywa statyczne powinny być częścią repo / projektu. Nie muszą znajdować się w katalogu src, a /static folder w katalogu głównym twojego projektu jest w porządku.

kiedy kompilujesz swoją aplikację - powiedzmy do dist folder - powinieneś skopiować obrazy również w tym folderze dist. W mojej aplikacji używam wtyczki copy-webpack dla tego zadania (mam swoje obrazy w ./public/assets/img/.. i nazywam je jako /assets/img/..)

    const CopyWebpackPlugin = require("copy-webpack-plugin");
...

plugins: [
...
/** copy all files from the public folder to the compilation root */
new CopyWebpackPlugin([{
from: "public",
to  : ""
}]),
...

również powinieneś upewnić się, że masz zainstalowany moduł ładujący dla twoich zasobów statycznych. Używam go tak:

  {
test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(??#?v=[.0-9]+)?$/,
use : "file-loader?name=assets/[name].[hash].[ext]"
}

Mam nadzieję, że to pomoże ci rozwiązać twój problem.


0 dla odpowiedzi nr 2

Skończyło się na przeniesieniu obrazów assets/img a następnie aktualizowanie konfiguracji Webpack, aby określić katalog przy użyciu publicPath. Oto jak to wyglądało:

      {
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: "file-loader",
include: [resolve("src")],
options: {
limit: 10000,
name: "/[name].[hash:7].[ext]",
publicPath: path.resolve(__dirname, "app")
}