Webpack較少加載程序缺少生產構建的基本路徑

Question

我有一個使用webpack的vue-js應用程序。 一切在開發和測試環境中都可以正常工作，但是我很難將其構建用於生產。

LESS文件中有背景圖像。 圖像文件位於/static 。 （我不確定這是猶太潔食還是應該放在側面src/assets 。）

無論如何，當LESS具有以下內容時：

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

然后，已編譯的CSS將具有相同的url

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

當瀏覽器加載程序時，找不到該imgate文件。 瀏覽器正在嘗試在此處查找文件：

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

任何人都可以推薦一種方法來構建應用程序以投入生產時的絕對路徑嗎？

Answer 1

您的靜態資產是否在/static項目目錄之外？ 否則我不明白為什么您的瀏覽器試圖從file:///static/img/foobar/my-image.svg請求它

無論如何，您的靜態資產應該是您的回購/項目的一部分。 它們不需要位於src目錄中，項目根目錄中的/static文件夾就可以了。

編譯應用程序時-假設您將其復制到dist文件夾中-您還應該將圖像復制到該dist文件夾中。 在我的應用程序中，我使用copy-webpack-plugin來完成該任務（我的圖像位於./public/assets/img/..並且將它們引用為/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  : ''
    }]),
    ...

您還應確保已為靜態資產安裝了文件加載器。 我這樣使用它：

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

希望這可以幫助您解決問題。

Answer 2

我最終將圖像移動到assets/img ，然后更新了webpack配置以使用publicPath指定目錄。 最終結果如下所示：

      {
    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')
    }