路径别名、环境变量、代理配置

这三个配置是 vite.config.js 里改动频率最高的部分，分别解决“导入路径太长”“多环境切换”“跨域联调”这三个日常开发痛点。它们配置简单，效果立竿见影。

路径别名：告别 `../../../` 地狱

随着项目规模增长，组件之间的相互引用很容易出现一长串相对路径：

import Button from '../../../components/common/Button.vue'

路径别名允许你为常用目录定义一个简短的符号（如 @ 代表 src 目录），让导入语句始终清晰可控。

配置方式（在 vite.config.js 中）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),       // @ 指向 src
      '@comp': path.resolve(__dirname, 'src/components'),
      '@utils': path.resolve(__dirname, 'src/utils')
    }
  }
})

配置后，上述导入可以写成：

import Button from '@comp/common/Button.vue'

实用建议：

@ 是社区约定俗成的 src 别名，建议优先使用。
别设太多别名，否则反而增加记忆成本，保持 3~5 个核心别名即可。
如果使用了 TypeScript，记得同步更新 tsconfig.json 的 paths 配置，让编辑器也能识别别名：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["src/*"],
        "@comp/*": ["src/components/*"]
      }
    }
  }

环境变量：让项目在不同环境中“自动变身”

一个项目通常需要在开发、测试、生产等不同环境中使用不同的 API 地址、AppKey 等配置。Vite 通过 .env 文件来管理这些变量，配合内置的环境变量加载机制，实现“零代码切换环境”。

使用方式：

在项目根目录创建环境文件，变量名必须以 VITE_ 开头：

   # .env.development （开发环境，vite dev 自动加载）
   VITE_API_BASE=http://localhost:3000/api
   VITE_APP_TITLE=开发版

   # .env.production （生产环境，vite build 自动加载）
   VITE_API_BASE=https://api.yourdomain.com
   VITE_APP_TITLE=生产版

在代码中通过 import.meta.env 访问：

   const apiBase = import.meta.env.VITE_API_BASE
   console.log(import.meta.env.VITE_APP_TITLE)  // 输出对应环境的值

环境加载规则：

Vite 会自动加载 .env.[mode] 文件，并合并到 import.meta.env 上。
通用配置可以放在 .env 文件中（所有环境共享），特定环境的配置放在 .env.[mode] 中，同名变量后者的优先级更高。
只有 VITE_ 前缀的变量才会暴露给客户端代码，这是为了防止敏感信息（如数据库密码）意外泄露。

实用建议：

将 .env 文件加入 .gitignore，避免不同开发者的本地配置互相覆盖。可以提供一个 .env.example 作为模板。
在业务代码中封装一个统一的 getEnv() 函数来读取环境变量，避免到处散落 import.meta.env，将来如果需要扩容或兜底逻辑也更方便。

代理配置：解决开发时的跨域问题

开发环境下，前端运行在 http://localhost:5173，后端接口可能在 http://localhost:8080，直接请求会因为浏览器的同源策略而报跨域错误。Vite 的开发服务器内置了代理功能，可以将特定前缀的请求转发到真实后端，轻松绕开跨域限制。

配置方式：

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端地址
        changeOrigin: true,              // 修改请求头中的 origin
        rewrite: (path) => path.replace(/^\/api/, '') // 可选：去掉 /api 前缀
      }
    }
  }
})

配置后，前端代码可以直接请求：

fetch('/api/users')  // 实际会被转发到 http://localhost:8080/users

代理只在开发服务器生效，生产环境需要 Nginx 或其他方式处理，因此接口路径需要前后端保持一致或通过 rewrite 做适配。

常用场景：

多个后端服务：配置多个代理规则，如 /api 转发到 Java 服务，/upload 转发到文件服务。
WebSocket 代理：设置 ws: true 即可代理 WebSocket 连接。
绕过 HTTPS 证书校验：如果后端是自签名证书，添加 secure: false。

这三个配置项覆盖了日常开发中 80% 的工程问题，而且都是“配一次，一直爽”的类型。遇到对应需求时，直接复制代码段稍作修改即可，剩下的 Vite 都帮你处理好了。

路径别名、环境变量、代理配置

路径别名：告别 ../../../ 地狱

环境变量：让项目在不同环境中“自动变身”

代理配置：解决开发时的跨域问题

路径别名：告别 `../../../` 地狱