Webpack打包跨平台CSS背景图路径冲突：如何解决Windows与Linux系统路径差异？-js教程-PHP中文网

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

心靈之曲

发布： 2024-11-18 17:37:19

原创

1119人浏览过

webpack打包跨平台css背景图路径冲突：如何解决windows与linux系统路径差异？

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

问题：

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

分析：

立即学习“前端免费学习笔记（深入）”；

windows平台路径问题：

linux平台路径正确：

解决方案：

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

如此AI员工

国内首个全链路营销获客AI Agent

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()

登录后复制

注意：

以上就是Webpack打包跨平台CSS背景图路径冲突：如何解决Windows与Linux系统路径差异？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：