共计 1259 个字符，预计需要花费 4 分钟才能阅读完成。
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/ 中，此时加载图片将会显示不出来。具体做法如下：1、在 config/index.js 文件内，修改代码：(列出 index.js 的部分代码)
build: {
// Template for index.html
index: path.resolve(__dirname, ‘../dist/index.html’),
// Paths
assetsRoot: path.resolve(__dirname, ‘../dist’),
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘./’,
}
assetsPublicPath 字段值由之前的 ’/’ 改为 ’./’；2、在 webpack.prod.conf.js 文件内，output 字段，添加代码 (publicPath: ‘./’)：
output: {
publicPath: ‘./’, // 添加的代码
path: config.build.assetsRoot,
filename: utils.assetsPath(‘js/[name].[chunkhash].js’),
chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js’)
},
3、在 utils.js 文件里添加 publicPath:’../../’，代码如下：
// (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。
