首页 › Vue › 工程化与架构 › Vite 高级配置与 Monorepo

Vite 高级配置

路径别名

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@comp': resolve(__dirname, 'src/components'),
      '@utils': resolve(__dirname, 'src/utils')
    }
  }
})

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

环境变量

# .env                        # 所有环境共享
# .env.development            # 开发环境（npm run dev）
# .env.production             # 生产环境（npm run build）

VITE_API_BASE=https://api.example.com
VITE_APP_TITLE=我的应用

在代码中访问：

console.log(import.meta.env.VITE_API_BASE)
console.log(import.meta.env.MODE)  // 'development' | 'production'

只有 VITE_ 前缀的变量会暴露到客户端代码。

代理配置

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

CSS 预处理

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
})

构建优化

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'ui-lib': ['element-plus'],
          'chart': ['echarts']
        }
      }
    },
    chunkSizeWarningLimit: 500,  // KB
    sourcemap: false
  }
})

Monorepo（pnpm workspace）

目录结构

project/
├── pnpm-workspace.yaml
├── package.json
├── packages/
│   ├── shared/              # 共享类型和工具
│   │   ├── src/
│   │   ├── package.json     # name: @project/shared
│   │   └── tsconfig.json
│   ├── ui/                  # 组件库
│   │   ├── src/
│   │   ├── package.json     # name: @project/ui
│   │   └── tsconfig.json
│   └── web/                 # 主应用
│       ├── src/
│       ├── package.json     # name: @project/web
│       └── vite.config.ts
└── package.json

# pnpm-workspace.yaml
packages:
  - 'packages/*'

// packages/web/package.json
{
  "dependencies": {
    "@project/shared": "workspace:*",
    "@project/ui": "workspace:*"
  }
}

Monorepo 优势

• 共享类型：API 响应类型定义在 shared 包中，前后端共用
• 共享配置：ESLint、TypeScript 配置统一
• 独立版本：每个包可独立发布
• 单一仓库：原子提交、跨包重构

CI/CD（GitHub Actions）

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [main]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - run: pnpm install
      - run: pnpm build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

小结

配置	作用
路径别名	@/ → src/，避免 ../../
环境变量	VITE_* 前缀，多环境配置
代理	开发环境解决跨域
手动分包	分离框架/UI 库到独立 chunk
Monorepo	pnpm workspace 管理多包项目

上一节：TypeScript + Vue 下一节：响应式原理（Proxy）

贡献者: 布欧-Lewyon