vue-cli3.0 圖片放在public，vue打包部署非根目錄時，圖片引入錯誤

解決辦法：

方法1. 修改nginx 配置，以部署目錄espace爲例

upstream a.xx.com{
    server 127.0.0.1:8081;
}

server {
    listen    80;
    server_name a.xx.com;
    location /{
        proxy_pass http://a.xx.com;
    }
    location ^~/images/ {
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:8001/images/;
    }
    location ^~/espace/ {
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:8001/;
    }
}

方法2. 修改文件目錄，將文件放於src/assets/images

• vue.config.js

let path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
 	chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'));
    }
}

• 圖片引入

<img src="@/assets/images/icon_file.png">
.check_box a.active::after {
    background: url(~@/assets/images/check_box.png) no-repeat center;
}