Vue中的打包配置引用路径的和背景图片路径问题(详细)

最新推荐文章于 2025-05-27 21:49:35 发布

原创

最新推荐文章于 2025-05-27 21:49:35 发布 · 3.1k 阅读

·

1

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#vue #run dev build #前端 #vue项目 #图片路径

在Vue项目中，解决打包时引用路径和背景图片路径问题的关键在于修改config/index.js和build/util.js文件。将assetsPublicPath的'/'更改为'./'，并在util.js中针对ExtractTextPlugin.extract添加publicPath: '../../'，以处理背景图片路径。若遇到本地run dev失败，可尝试注释掉publicPath: '../../'并恢复assetsPublicPath为'/'。完成上述步骤后，使用npm run build即可正常打包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.找到文件路径 config --> index.js --> build -> assetsPublicPath 中的 '/' 成为 './' (注意：两个assetsPublicPath)

2.在build -> util.js 里找到 ExtractTextPlugin.extract 增加一行：publicPath: '../../'，主要解决背景图片路径的问题

 use: loaders,
 fallback: 'vue-style-loader',
 // publicPath: '../../'

如果ExtractTextPlugin.extract下没有东西就加上上面的代码

Tip：我们本地运行自己的项目run不起来就尝试 publicPath: '../../'

最低0.47元/天解锁文章

200万优质内容无限畅学

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。