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系统路径差异？的详细内容，更多请关注硕下网其它相关文章！