解决 vue-cli 打包后图片路径获取不到的问题

解决Vue-cli项目打包后图片路径问题

最新推荐文章于 2023-01-07 16:46:24 发布

转载最新推荐文章于 2023-01-07 16:46:24 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/junwu/p/10763586.html

前端专栏收录该内容

56 篇文章

订阅专栏

这篇博客介绍了如何修复Vue-cli构建的项目在打包后图片路径失效的问题。主要步骤包括修改config/index.js和webpack.prod.conf.js文件的assetsPublicPath为'./'，以及在utils.js中设置正确的publicPath，确保CSS引用的背景图片能正常显示。

摘抄博客：vue-cli打包后图片路径取不到的问题

1. 第一步
在config / index.js 文件中把assetsPublicPath 修改为 ./

在这里插入图片描述

2. 第二步

在 build / webpack.prod.conf.js 文件中，在output里增加 publicPath: './'
在这里插入图片描述

3. 第三步
虽然解决了资源路径的引用问题，但是资源里面的背景图片还是不显示， background: url("../../assets/images/logo-index.png") no-repeat;被相对打包后变成了url(static/img/logo-index.2fbf2.png) no-repeat所以我们要保留css引用图片的正常路径，即：url(../../static/img/logo-index.2fbf2.png) no-repeat

那么就需要修改build / utils.js文件里添加publicPath: '../../'

在这里插入图片描述