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

作者站长头像
站长
· 阅读数 7

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': '' },
      },
    }
  }
回复
1个回答
avatar
test
2024-06-28

.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" />
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容