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

Webpack less-loader缺少生产构建的基本路径

2 个答案: