vite 环境变量导致接口携带本地ip地址

vite 环境变量导致接口携带本地ip地址

最近在学习vite+tsx+element plus 做个框架 把踩过的坑记录一下~萌新上路 请多指教。。

主要功能：对接后端接口、对接第三方API

遇到问题

发现接口携带本地地址

解决方案

// 创建axios实例
const service = axios.create({
    // 服务接口请求
    baseURL:import.meta.env.VITE_APP_BASE_API,
    // 超时设置
    timeout: 15000,
    headers: { 'Content-Type': 'application/json;charset=utf-8' }
})

本地环境配置如下：

在 vite.config.ts 内服务器配置如下：

//服务器配置
server: {
  host: '192.168.5.74',
  port: Number(loadEnv(mode, process.cwd()).VITE_APP_PORT),
  strictPort: true, // 端口被占用直接退出
  https: false,
  open: false,// 在开发服务器启动时自动在浏览器中打开应用程序
  // 反向代理
  proxy: {
    // 字符串简写写法
    // '/foo': '',
    // 选项写法
    '/api': {
      target: mode === 'development' ? loadEnv(mode, process.cwd()).VITE_APP_DEV_URL : loadEnv(mode, process.cwd()).VITE_APP_PROD_URL,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '/api')
    },
    '/city-api': {
      target: 'http://pv.sohu.com/cityjson', //目标URL,即本次要使用的第三方API
      changeOrigin: true,
      rewrite: path => path.replace(/^\/city-api/, '')
    },
  },
  hmr: {
    overlay: false // 屏蔽服务器报错
  }
}

位置如下：

本地接口如下：

调用本地接口如下:

调用第三方接口如下:

结果如下：