vite读取本地配置文件,配置代理

我的大概思路是开发需要本地代理
生产不需要

所以我判断了环境只有开发配置代理

创建开发和生成配置文件

.env.development

// 开发环境配置
VITE_BASIC_URL = http://localhost:11111
VITE_BASIC_PREFIX = /api

.env.production

// 生产环境配置
VITE_BASIC_URL = https://mapi.jokeo.cn
VITE_BASIC_PREFIX = https://mapi.jokeo.cn

vite配置代理

import { defineConfig, loadEnv } from "vite";
import { fileURLToPath, URL } from "node:url";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import zipPack from "vite-plugin-zip-pack";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
// 读取配置文件
  const env = loadEnv(mode, process.cwd(), "");
  // 判断是否是开发环境,是的话才走本地代理,不是就不需要了
  const isDev = mode === 'development';
  let proxy = {};
  if (isDev) {
    proxy = {
      '/api': {
        target: env.VITE_BASIC_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 可选，用于重写请求路径
      }
    }
  }
  // console.info(proxy);

  return {
    server: {
      host: "0.0.0.0", // 允许内网访问
      port: 6600, // 您可以选择任何可用的端口
      open: true, // 启动服务器后自动打开浏览器
      proxy: proxy // 配置代理
    },
    plugins: [
      vue(),
      AutoImport({
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        resolvers: [ElementPlusResolver()],
      }),
      zipPack({
        inDir: 'dist',  // 输入的文件夹，就是要打包的文件夹
        outDir: 'dist', // 打包好的 zip 文件放到哪个文件夹下
        outFileName: `dist.zip`, // 打包好的文件名，自行定义，这里我定义了一个 timeStringNow 变量，放置了此时此刻的时间 2024-01-06 这样的
        pathPrefix: ''
    })
    
    ],
    resolve: {
      // 实际的路径转化
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
  }
});

核心代码1.读取文件判断环境

// 读取配置文件
  const env = loadEnv(mode, process.cwd(), "");
  // 判断是否是开发环境,是的话才走本地代理,不是就不需要了
  const isDev = mode === 'development';
  let proxy = {};
  if (isDev) {
    proxy = {
      '/api': {
        target: env.VITE_BASIC_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 可选，用于重写请求路径
      }
    }
  }

核心代码2.配置代理

 server: {
      host: "0.0.0.0", // 允许内网访问
      port: 6600, // 您可以选择任何可用的端口
      open: true, // 启动服务器后自动打开浏览器
      proxy: proxy // 配置代理
    },

axios配置

httpClient.js
注意 baseURL: import.meta.env.VITE_BASIC_PREFIX, // API 基地址

import axios from 'axios';

// 创建 Axios 实例
const apiClient = axios.create({
  baseURL: import.meta.env.VITE_BASIC_PREFIX, // API 基地址
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
    'Authorization': localStorage.getItem('apiKey'), 
  },
});

// 请求拦截器
apiClient.interceptors.request.use(
  (config) => {
    // 可以在这里添加请求头或其他配置
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
apiClient.interceptors.response.use(
  (response) => {
    return response.data; // 直接返回数据
  },
  (error) => {
    // 处理错误
    console.error('API 请求错误:', error);
    return Promise.reject(error);
  }
);

export default apiClient;