Webpack - 生产如何为 <link href=""> 和 css 文件中的图像路径启用不同的文件路径答案

【问题标题】：Webpack - Production how do you enable different file paths for <link href=""> and image paths in css filesWebpack - 生产如何为 <link href=""> 和 css 文件中的图像路径启用不同的文件路径
【发布时间】：2018-11-26 18:45:32
【问题描述】：

我会更详细地解释。

    module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist/'),
    assetsSubDirectory: 'assets',
    assetsPublicPath: './',
    productionSourceMap: true,
  }
}

以上是我的 webpack 构建的配置设置。这适用于将 CSS 文件等资产嵌入到我的 index.html 文件中所需的路径。如下代码所示：-

<link href=./assets/css/app.345e4523874bd70b2f24b4356d30ed9e.css rel=stylesheet>

但是在查看 app.345e4523874bd70b2f24b4356d30ed9e.css 时，当然 webpack 已经构建了所有要构建的图像和字体的路径，如下所示：-

./assets/img/home-bg.jpg

问题是我需要将所有与 CSS 相关的资产路径更改为 ../img 或 ../fonts。

我尝试了很多东西并在网上查找但似乎找不到解决方案！？一定很简单吧。

这是我的文件夹结构。谢谢

css 图像 js index.html

【问题讨论】：

标签： javascript css path vuejs2 webpack-2

【解决方案1】：

刚刚通过添加 'publicPath'../' 解决了这个问题

{
    test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]'),
      publicPath: '../'
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
      publicPath: '../'
    }

希望这对其他人有帮助

【讨论】：