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

stars_gthrsj

已于 2022-11-01 10:50:16 修改

阅读量1k

点赞数

文章标签： javascript 前端 typescript

于 2022-09-23 13:23:07 首次发布

本文链接：https://blog.csdn.net/x476769784/article/details/127007308

版权

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 // 屏蔽服务器报错
  }
}