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