首页 文章

Webpack - 生产环境 如何为css文件中的<link href =“”>和图像路径启用不同的文件路径

提问于
浏览 次
0

我会更详细地解释一下 .

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 img js index.html

javascript css path vuejs2 webpack-2

1 回答

  • 0

    通过添加'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: '../'
    }

    希望这有助于其他人

    回复于

相关问题