Webpack打包跨平台CSS背景图路径冲突：如何解决Windows与Linux系统路径差异？

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《Webpack打包跨平台CSS背景图路径冲突：如何解决Windows与Linux系统路径差异？》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

webpack打包不同平台css背景图路径不一致

问题：

在使用webpack打包一个带有皮肤切换功能的vue项目时，发现不同平台上的css背景图路径不一致。

分析：

windows平台路径问题：

• 在windows平台下，背景图的路径缺少返回到上两个目录的符号，导致找不到图片。

linux平台路径正确：

• 在linux平台下，背景图的路径有返回到上两个目录的符号，找到了图片。

解决方案：

在webpack配置中，发现为皮肤定义的webpack config.module中的minicssextractplugin.loader和vue-cli定义的minicssextractplugin.loader存在差异。

vue-cli定义minicssextractplugin.loader：

rule
.use('extract-css-loader')
.loader(require('mini-css-extract-plugin').loader)
.options({
  hmr: !isprod,
  publicpath: csspublicpath
})

自定义定义minicssextractplugin.loader：

rule
.use(minicssextractplugin.loader)
.loader(minicssextractplugin.loader)
.end()

原因：

vue-cli中的minicssextractplugin.loader多了一个publicpath属性。

修正：

根据实际情况定义了一个适合自己项目的publicpath，解决了问题。

完整解决办法：

rule
.use(MiniCssExtractPlugin.loader)
.loader(MiniCssExtractPlugin.loader)
.options({
  hmr: !isProd,
  publicPath: myPublicPath
})
.end()

注意：

• 公共路径(publicpath)请根据实际情况进行调整。
• 其他可能的解决方案可能是清除并重新安装minicssextractplugin包。

好了，本文到此结束，带大家了解了《Webpack打包跨平台CSS背景图路径冲突：如何解决Windows与Linux系统路径差异？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！