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

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

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

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

2. 第二步

build / webpack.prod.conf.js 文件中,在output里增加 publicPath: './'
解决 vue-cli 打包后图片路径获取不到的问题

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: '../../'

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