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

r囧r小猫 2021-09-24 08:24 489阅读 0赞

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

nginx.conf配置：
        server {
            listen       8071;  #此端口不能和VUE项目端口重复！！！
            client_max_body_size 1024M;
            location /upload/ {
                root   D:/lsbms;   #此处图片路径为  D:/lsbms/upload/xxx.jpg
                index  index.html index.htm;
                autoindex on;
            }
            location / {
                try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
                root   D:/lsbmse/upload;
                index  index.html index.htm;
            }
            location @router {        
                rewrite ^.*$ /index.html last;
            }
            location /api/ {      #下面的代码没有什么用，我放着玩的
                rewrite ^/api/(.*) /$1 break;
                proxy_pass http://localhost:8091;
                
            }
            location /ips/ {
                rewrite ^/ips/(.*) /$1 break;
                proxy_pass http://localhost:8095;
            }
        }
    
    VUE项目路径转发index.js：
    
    var path = require('path')
    var os = require('os'), ip = '', ifaces = os.networkInterfaces() // 获取本机ip
    for (var i in ifaces) {
        for (var j in ifaces[i]) {
            var val = ifaces[i][j]
            if (val.family === 'IPv4' && val.address !== '127.0.0.1') {
                ip = val.address
            }
        }
    }
    module.exports = {
      build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: false,
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report
      },
      dev: {
        env: require('./dev.env'),
        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，~\_~

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

自己玩玩 ，随便看看

[pygou.com][]

[pygou.com]: http://pygou.com/