Vue项目生产环境部署实战指南-代码聚汇网

Vue项目生产环境部署实战指南

CarrieYung

1. 项目背景与核心价值

去年接手公司官网重构项目时，我花了整整两周时间才把Vue项目成功部署到生产环境。期间踩过的坑包括Nginx配置错误、路由失效、静态资源404、跨域问题等等。这份手册正是基于这些实战经验整理而成，涵盖从代码打包到服务器配置的完整链路。

对于前端开发者而言，本地运行npm run dev和公网部署完全是两回事。前者只需关注业务逻辑，后者则涉及：

生产环境代码优化
服务器资源调配
网络策略配置
持续集成方案

2. 环境准备与工具选型

2.1 基础工具清单

工具类别	推荐方案	备选方案
打包工具	Vite 4.x	Webpack 5
服务器	Nginx 1.18+	Apache 2.4
部署平台	阿里云ECS	腾讯云CVM
域名服务	Cloudflare DNS	阿里云DNS
监控工具	Sentry	Fundebug

实测发现Vite的构建速度比Webpack快3-5倍，特别适合大型项目。但若项目中使用了require.context等Webpack特有API，则需保留Webpack配置。

2.2 服务器基础配置

bash复制# 以Ubuntu 20.04为例
sudo apt update
sudo apt install -y nginx
sudo systemctl enable nginx
sudo ufw allow 'Nginx Full'

建议服务器最低配置：

1核CPU
2GB内存
40GB SSD存储
带宽≥5Mbps

3. 项目构建与优化

3.1 生产环境构建

bash复制npm run build

关键构建参数：

javascript复制// vite.config.js
export default defineConfig({
  build: {
    outDir: 'dist',
    assetsInlineLimit: 4096, // 4KB以下资源转base64
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

3.2 构建产物分析

安装rollup-plugin-visualizer生成构建报告：

bash复制npm i -D rollup-plugin-visualizer

配置示例：

javascript复制import { visualizer } from 'rollup-plugin-visualizer'

plugins: [
  visualizer({
    filename: 'stats.html',
    open: true
  })
]

典型优化方向：

超过500KB的第三方库考虑按需加载
重复依赖检查（如lodash出现多个版本）
未使用的CSS规则清理

4. Nginx服务器配置

4.1 基础配置模板

nginx复制server {
    listen 80;
    server_name yourdomain.com;
    
    root /var/www/your-project/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

4.2 HTTPS强制跳转

使用Certbot获取免费SSL证书：

bash复制sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com

自动更新证书：

bash复制sudo certbot renew --dry-run

5. 高级部署方案

5.1 蓝绿部署架构

code复制负载均衡器
├── 蓝组 (当前生产环境)
│   └── server1: 1.0.0
└── 绿组 (新版本)
    └── server2: 1.1.0

切换流程：

将绿组服务器加入负载均衡池
逐步转移流量（10% → 50% → 100%）
监控错误率与性能指标
确认稳定后下线蓝组

5.2 静态资源CDN加速

推荐配置：

javascript复制// vite.config.js
export default defineConfig({
  base: 'https://cdn.yourdomain.com/assets/'
})

七牛云上传示例：

bash复制qshell fput your-bucket dist/assets/logo.png logo.png

6. 监控与维护

6.1 性能监控指标

关键监控项：

FCP (First Contentful Paint)
LCP (Largest Contentful Paint)
CLS (Cumulative Layout Shift)
TTFB (Time To First Byte)

接入方案：

javascript复制import { getCLS, getFID, getLCP } from 'web-vitals'

getCLS(console.log)
getFID(console.log)
getLCP(console.log)

6.2 错误捕获

Sentry接入示例：

javascript复制import * as Sentry from '@sentry/vue'

app.use(Sentry, {
  dsn: 'your-dsn',
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router)
    })
  ],
  tracesSampleRate: 0.2
})

7. 常见问题排查

7.1 路由404问题

症状：刷新页面返回404
解决方案：

nginx复制location / {
    try_files $uri $uri/ /index.html;
}

7.2 静态资源加载失败

可能原因：

路径大小写不一致（Linux区分大小写）
构建时publicPath配置错误
Nginx未正确配置MIME类型

检查步骤：

bash复制curl -I https://yourdomain.com/assets/logo.png

7.3 跨域问题

后端需配置：

http复制Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Methods: GET,POST,OPTIONS
Access-Control-Allow-Headers: Content-Type

开发环境代理配置：

javascript复制// vite.config.js
server: {
  proxy: {
    '/api': {
      target: 'http://backend:3000',
      changeOrigin: true
    }
  }
}

8. 持续集成方案

8.1 GitHub Actions示例

yaml复制name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 16
          
      - name: Install dependencies
        run: npm ci
      
      - name: Build project
        run: npm run build
        
      - name: Deploy to Server
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_KEY }}
          source: "dist/"
          target: "/var/www/your-project"
          
      - name: Restart Nginx
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_KEY }}
          script: sudo systemctl restart nginx

8.2 版本回滚机制

保留最近5个版本的构建产物
通过符号链接切换版本：

bash复制ln -snf /var/www/your-project/releases/v1.0.1 /var/www/your-project/current

9. 安全加固措施

9.1 HTTP头部安全策略