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系统路径差异？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2649841.html
