Vue 本地开发访问线上图片问题

问题：线上图片无法访问

 解决方法：vue.config.js 设置 devServer proxy 代理

devServer: {
  open: false,
  overlay: {
    warnings: false,
    errors: true
  },
  proxy: {
    // 文档: https://cli.vuejs.org/zh/config/#devserver-proxy
    '/system/upload': {
      target: `http://baomingm.bjcia.org.cn/system/upload`,
      changeOrigin: true,
      secure: false,
      ws: true,
      pathRewrite: {
        '^/system/upload': ''
      }
    }
  }
},

原理

通过 proxy 代理转发，/system/upload  转发到线上图片访问地址  http://baomingm.bjcia.org.cn/system/upload

效果