vue-cli3.0 图片放在public,vue打包部署非根目录时,图片引入错误

解决办法: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;
}