目录Vue项目build图片加载不出来1.在config/index.js文件内2.在webpack.prod.conf.js文件内3.在utils.js文件里添加 publicPa
vue项目，build之后会对图片进行处理，具体处理的方式是在文件WEBpack.base.conf.js中，有如下代码：
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 1k-----限制文件的大小
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
]
}以上代码中，使用url-loader对图片的大小进行限制，在limit之内，webpack会将图片转化为base64，超出limit限制，交给file-loader处理。
如果在limit范围之内，不会出现图片加载不出来的情况；
超出limit，webpack会将处理后的图片放在dist/static/img/中，此时加载图片将会显示不出来。具体做法如下：
修改代码： (列出index.js的部分代码)
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
}assetsPublicPath字段值由之前的'/'改为'./'；
output字段，添加代码(publicPath: './')：
output: {
publicPath: './', // 添加的代码
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},代码如下：
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' // 添加的代码
})
} else {
return ['vue-style-loader'].concat(loaders)
}以上步骤操作完后，执行命令:npm run build
在build后，dist中的index.html页面的link、script标签的引入路径变为相对路径；同时，相关的图片路径，也变变为相对路径，此时部署项目，不再出现图片路径404。
1.图片的后缀名不能含ad字母敏感词（即谷歌会认为是广告，并自动删除）
2.图片本身（质量）的原因，跟前端无关，需让UI给新的设计图片。--备注：QQ直接截图到本地的图片打包后可能也不显示，需跟UI要原始设计图。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: Vue项目build后,图片加载不出来的解决
本文链接: https://www.lsjlt.com/news/144000.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0