当前位置：首页 > article >正文

【开发和生产环境配置】

article 2025/2/4 17:56:22

开发和生产环境配置

开发环境
- .env.development
axios中使用
vite.config.ts配置代理

开发环境

在这里插入图片描述

.env.development

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '测试环境'
VITE_SERVE = 'http://127.0.0.1:8080'
VITE_APP_BASE_API = '/api'

axios中使用

//创建axios实例
const request = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, 
  timeout: 5000,
})

vite.config.ts配置代理

import { defineConfig,loadEnv } from 'vite'

export default defineConfig(({ mode }) => {

  // 加载环境变量
  const env = loadEnv(mode, process.cwd());
  return {
    resolve: {
      alias: {
        // 将 '@' 别名映射到项目的 'src' 目录，方便在项目中引用模块
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
   // 代理跨域
    server: {
      port: 5173,
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_SERVE,
          changeOrigin: true,
          // 替换掉/api
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  }
})