vue .env.development 文件配置 服务器地址，本地访问不到文件，怎么办？

Question

vue .env.development 文件配置 服务器地址，本地环境访问不到文件，怎么办？

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = ''
VUE_APP_BASE_PRODUCT = 'http://47.***.***.***:8099/www/service/Product/'
VUE_APP_BASE_WEB = 'http://47.***.***.***:8099/www/web/'

VUE_APP_OUTDIR = 'dist'

在vue页面 调用图片，图片地址是http://localhost:8080，图片不显示怎么办？
http://localhost:8080/www/service/Product/VRFODU/png/ATOM%20T...

我在页面的调用方式，是在data里调用：

        //室外机设备
        swjs: [
          {
            PictureFile:
              process.env.VUE_APP_BASE_PRODUCT + "VRFODU/png/ATOM%20T-EU%208-10kW.png", //设备图片url
            equipId: "swj-1", // 设备id
            equipXh: "HCYU 2246 XRV", // 设备型号
            width: 100, // 设备图片宽度
            height: 74, // 设备图片高度
          },

---

解决方法：

在vue.config.js文件里devServer项里配置，增加1项：/Product

  devServer: {
    proxy: {
      '/api': {
        target: 'http://47.***.***.***:8099/Midea/VRF/www/service/api',
        pathRewrite: { '^/api': '' },
      },
      '/Product': {
        target: 'http://47.***.***.***:8099',
        pathRewrite: { '^/Product': '' },
      },
    }
  }

Answer 1

.env.development：

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = ''
VUE_APP_BASE_PRODUCT = 'http://localhost:8080/Product/'
VUE_APP_BASE_WEB = 'http://47.112.143.149:8099/www/web/'

VUE_APP_OUTDIR = 'dist'

<img :src="`${process.env.VUE_APP_BASE_PRODUCT}VRFODU/png/ATOM`" alt="Image" />