前端设计

开发代理：

在 vue 项目内的 vue.config.js 配置文件内配置 devserver 配置，在 proxy 参数内配置两个代理路径，如

proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      // 后端接口代理路径
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        timeout: 3*60*1000, //设置超时
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      // 图片映射代理路径
      [process.env.VUE_APP_STATIC_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        timeout: 3*60*1000, //设置超时
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '/'
        }
      },
      }

生产代理：

在nginx 配置文件nginx.conf内配置 图片代理路由，类似 /proc-api/ 一样的路由

后端设计

参考如下链接，去配置后端图片映射路径

参考链接

1. addResourceHandler配置静态资源映射本地文件

2. springboot中配置addResourceHandler和addResourceLocations，使得可以从磁盘中读取图片、视频、音频等