如何灵活调用不同的请求地址或端口号

前提：在项目推到正式环境后，发现上传的文件和图片后，详情内未显示，上传时点击查看显示的也是异常

过程：发现项目代码中将上传的地址和查看的地址都是固定去写的测试环境的地址，所以在正式环境也是上传到测试环境的地址了，上传和查看时自然会报错和异常，在本地和测试环境测试时未发现此错误，如果在项目中每个需要上传和查看的地方都单独写死测试地址，那么在代码打包直接推向正式环境时就会遇到问题，改了地址测试环境不对，不改地址正式环境又不对，而且每一个地方都一个个去写，去维护的时候也会很麻烦，如果项目改了服务器地址就需要一个个的去改

解决：1、原本项目中是所有需要上传和查看文件或图片的地方都是在每一个组件中一个个写的，本来想通过建立全局变量去解决，后来是在utils文件夹下建立config.js（utils文件夹是我个人建的）

声明config对象，根据条件判断给config对象赋值

let config

首先获取当前登录地址，进行判断，是正式环境地址时，将config对象中添加upFileUrl变量（我自己起的名字），并赋正式环境上传文件的地址（和后端问好的地址和端口号），当是测试环境或者本地地址时，赋测试环境上传文件的地址

switch (window.location.host) {
  //正式地址
  case 'xx.xxx.xx.xxx:11111':
    config = {
      upFileUrl:'http://xx.xxx.xx.xxx:11111'
    }
    break

  //测试地址
  //本地
  default:

    //默认
    config = {
      upFileUrl:'http://xx.xxx.xx.xxx:22222'
    }
}

然后对config对象进行暴露

export default config

最后在需要使用地址的组件中，引入config.js

import config from '@/utils/config'  // 引入文件上传地址

使用config对象中的地址变量，根据个人项目需要拼接文档路径

//查看文件
const openInvoice = item => {
  const { url } = item
  url && window.open(config.upFileUrl+`${url}`, '_blank')//根据个人项目情况进行引用
}

这样写完如果需要改服务器地址就不用每一个页面去修改，方便维护，只需要在config.js中修改就可以了，但是这样有一点麻烦的地方就是需要在每一个需要使用地址的组件中去引入config.js，也可以参考下面这种方法

2、用另外一种方式，直接挂在Windows上

在public文件夹下建立globalConfig.js(自己起的名字)

在js文件中给window.globalConfig变量进行赋值

window.globalConfig = {
  upFileUrl:window.location.host==='http://xx.xxx.xx.xxx:11111'
            ?"http://xx.xxx.xx.xxx:11111"
            :"http://xx.xxx.xx.xxx:22222",
  //以下均为其他举例，也可以在这里挂载其他对象
  cesiumTilesUrl: {
    url: "http://xx.xxx.xx.xxx:00000/resource/tiles/",
    areas: [
      {
        name: "areaAll",
      }
    ]
  },
  serverUrl: 'http://xx.xxx.xx.xxx:00000', // 测试服
}

在页面需要使用地址时可以直接用window.globalConfig，不需要每个组件都去引进js文件

let baseUrl = window.globalConfig.upFileUrl
//查看文件
const openInvoice = item => {
  const { url } = item
  url && window.open(baseUrl+`${url}`, '_blank')//根据个人项目情况进行引用
}

如果有说的不准确或者专业术语不对的地方还请路过的大佬指教。