vue根据浏览器输入的域名确定接口请求API

问题背景需求：项目中新旧域名交替时会出现一个IP对应两个域名的情况，这个时候将接口请求API写死会出现跨域问题，因此此时需根据浏览器输入的域名得到接口请求API。

所有需要修改配置的文件如下：

1、package.json文件

执行npm run build:serve构建时使用.env.serve文件里的变量进行打包

{
  "scripts": {
    "dev": "vite",
    "build": "npm run build:prod",
    "build:prod": "vue-tsc --noEmit && vite build --mode production",
    "build:serve": "vue-tsc --noEmit && vite build --mode serve", // 设置打包时的环境
    "serve": "npm run build && vite preview",
    "lint": "eslint \"src/**/*.{vue,ts}\" --fix"
  },
}

2、根目录下建立env.serve文件

NODE_ENV=serve

3、根据环境和浏览器输入，设置接口请求API

api: import.meta.env.MODE == 'serve' ? window.location.protocol+"//"+window.location.host : import.meta.env.VITE_APP_API,