Vue專案build後，圖片載入不出來
摘要：
vue專案，build之後會對圖片進行處理，具體處理的方式是在檔案webpack.base.conf.js中，有如下程式碼：
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
...
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。