vue项目nginx代理图片访问请求

时间：2025-03-18 09:47:18

vue前台访问springboot项目图片，路径无法访问到图片文件，需要做下地址转换，推荐在springboot中配置虚拟路径，但是如果很多地方已经配置的磁盘路径，修改的地方比较多，可以使用nginx做代理，通过nginx拦截图片请求来处理，也是不错的。 

配置：
    server {
        listen       8071;  #此端口不能和VUE项目端口重复！！！
        client_max_body_size 1024M;
        location /upload/ {
            root   D:/lsbms;   #此处图片路径为  D:/lsbms/upload/
            index   ;
            autoindex on;
        }
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            root   D:/lsbmse/upload;
            index   ;
        }
        location @router {        
            rewrite ^.*$ / last;
        }
        location /api/ {      #下面的代码没有什么用，我放着玩的
            rewrite ^/api/(.*) /$1 break;
            proxy_pass http://localhost:8091;
            
        }
        location /ips/ {
            rewrite ^/ips/(.*) /$1 break;
            proxy_pass http://localhost:8095;
        }
    }

VUE项目路径转发：

var path = require('path')
var os = require('os'), ip = '', ifaces = () // 获取本机ip
for (var i in ifaces) {
    for (var j in ifaces[i]) {
        var val = ifaces[i][j]
        if ( === 'IPv4' &&  !== '127.0.0.1') {
            ip = 
        }
    }
}
 = {
  build: {
    env: require('./'),
    index: (__dirname, '../dist/'),
    assetsRoot: (__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    productionSourceMap: false,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: .npm_config_report
  },
  dev: {
    env: require('./'),
    port: 8070,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            // target: 'http://'+ ip +':8091',  // 接口域名 开发
            target: 'http://'+ ip +':8091',  // 接口域名 开发
            secure: true,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: { // 如果接口本身没有api的路径，那么这里将发送到后端的请求重写为没有api的路径
                '^/api': '/'
            }
        },
        '/ips': {
            target: 'http://'+ ip +':8095',  // 接口域名 开发
            secure: true,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: { // 如果接口本身没有api的路径，那么这里将发送到后端的请求重写为没有api的路径
                '^/ips': '/'
            }
        },
        '/upload': {  //主要看这里！！！
            target: 'http://'+ ip +':8071',  // 接口域名 开发
            secure: true,  // 如果是https接口，需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: { // 如果接口本身没有api的路径，那么这里将发送到后端的请求重写为没有api的路径
                '^/upload': '/upload'
            }
        },
    },
    cssSourceMap: false
  }
}

小心提醒：

nginx挂多了，不要再试了

清缓存！重启电脑！

有学到东西，点个赞哦，不然祝你天天写bug，~_~

-------------------------------------------------- 懒懒的分隔线 --------------------------------------------------

自己玩玩 ，随便看看

 

相关文章