Vue大型项目构建与部署配置

大型Vue项目需规范化构建与部署流程，下面梳理核心配置方案。

Vite多环境配置

环境变量文件

# .env.development
VITE_API_BASE_URL=http://localhost:8080
VITE_ENV=development

# .env.staging
VITE_API_BASE_URL=https://staging-api.example.com
VITE_ENV=staging

# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_ENV=production
VITE_APP_VERSION=1.0.0

vite.config.js完整配置

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

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src')
      }
    },
    build: {
      outDir: `dist/${env.VITE_ENV}`,
      sourcemap: mode !== 'production',
      rollupOptions: {
        output: {
          manualChunks: {
            vue: ['vue', 'vue-router', 'pinia'],
            ui: ['element-plus']
          },
          chunkFileNames: 'js/[name]-[hash].js',
          entryFileNames: 'js/[name]-[hash].js',
          assetFileNames: '[ext]/[name]-[hash].[ext]'
        }
      }
    },
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  }
})

Docker容器化部署

Dockerfile

# 构建阶段
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --registry=https://registry.npmmirror.com
COPY . .
ARG VITE_ENV=production
ENV VITE_ENV=${VITE_ENV}
RUN npm run build

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/dist/production /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

.dockerignore

node_modules
dist
.git
.env.local

Nginx配置

生产环境配置

# nginx.conf
server {
    listen 80;
    server_name example.com;
    root /usr/share/nginx/html;
    index index.html;

    # Gzip压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml;
    gzip_min_length 1000;

    # SPA路由支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # API代理
    location /api/ {
        proxy_pass http://backend:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 安全头
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
}

CI/CD配置

GitHub Actions示例

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

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          
      - name: Install Dependencies
        run: npm ci
        
      - name: Build
        run: npm run build:prod
        env:
          VITE_API_BASE_URL: ${{ secrets.API_URL }}
          
      - name: Docker Build
        run: docker build -t myapp:${{ github.sha }} .
        
      - name: Deploy
        run: |
          docker tag myapp:${{ github.sha }} registry.example.com/myapp:latest
          docker push registry.example.com/myapp:latest          

部署策略对比

要点总结

• Vite配置使用多环境变量文件，区分开发/测试/生产
• 构建产物按哈希命名，支持长期缓存
• Docker采用多阶段构建，减小镜像体积
• Nginx配置Gzip压缩与静态资源缓存
• SPA路由使用try_files回退到index.html
• CI/CD流程自动化构建-打包-部署

存放路径: articles/VUE/专家/大型项目架构分层设计/构建与部署配置.md