项目打包与静态部署（Nginx、Vercel 等）

在 Vue 3 项目开发完成后，打包和部署是将其上线的重要步骤。Vue 3 配合现代构建工具（如 Vite）可以将应用编译为静态资源，适配多种部署方式，如 Nginx 服务器或 Vercel 等平台。本节将详细讲解项目打包的步骤、静态部署的配置方法，并通过示例展示如何使用 Nginx 和 Vercel 部署 Vue 3 应用，帮助你顺利将项目推向生产环境。

项目打包

打包原理

Vue 3 项目通过构建工具将源码（Vue 组件、TS/JS、CSS 等）编译为静态 HTML、JS 和 CSS 文件，生成可直接在浏览器运行的资源。

使用 Vite 打包

配置

确保 vite.config.ts 已正确设置：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist', // 输出目录
    minify: 'esbuild', // 使用 esbuild 压缩
    sourcemap: false // 生产环境禁用 sourcemap
  }
});

打包命令

npm run build
  • 输出：
    dist/
├── assets/
│   ├── index-[hash].js
│   └── index-[hash].css
├── index.html
  • 说明：
    • assets/：包含打包后的 JS 和 CSS 文件。
    • index.html：入口文件，引用资源。

预览本地构建

npm run preview
  • 效果：在本地启动服务器，访问 http://localhost:4173 验证构建结果。

优化打包

  • 代码分割：
    build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router']
      }
    }
  }
}
  • 环境变量：
    # .env.production
VITE_API_URL=https://api.example.com

    // src/main.ts
console.log(import.meta.env.VITE_API_URL);

静态部署

1. 使用 Nginx

部署步骤

  1. 上传文件：
    • 将 dist/ 目录上传至服务器（如 /var/www/my-vue-app）。
  2. 安装 Nginx：
    sudo apt update
sudo apt install nginx
  3. 配置 Nginx：
    • 编辑配置文件 /etc/nginx/sites-available/my-vue-app：
      server {
    listen 80;
    server_name my-vue-app.com;

    root /var/www/my-vue-app;
    index index.html;

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

    location /assets/ {
        expires 1y; # 缓存静态资源
        add_header Cache-Control "public";
    }
}
    • 启用配置：
      sudo ln -s /etc/nginx/sites-available/my-vue-app /etc/nginx/sites-enabled/
sudo nginx -t # 检查配置
sudo systemctl restart nginx
  4. 访问：浏览器输入 http://my-vue-app.com。

HTTPS 配置

  • 安装 Certbot：
    sudo apt install certbot python3-certbot-nginx
  • 获取证书：
    sudo certbot --nginx -d my-vue-app.com
  • 自动更新 Nginx 配置，重启服务。

2. 使用 Vercel

部署步骤

  1. 安装 Vercel CLI：
    npm install -g vercel
  2. 登录：
    vercel login
  3. 部署项目：
    • 在项目根目录运行：
      vercel
    • 按提示配置：
      • Build Command：npm run build。
      • Output Directory：dist。
      • Development Command：npm run dev（可选）。
  4. 访问：部署完成后获得 URL（如 https://my-vue-app.vercel.app）。

Vercel 配置（可选）

  • vercel.json：
    {
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": { "distDir": "dist" }
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

实践：部署示例

示例项目

App.vue

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {}
});
</script>

router/index.ts

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: () => import('@/views/About.vue') }
];

export default createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

Nginx 部署

  1. 打包：
    npm run build
  2. 上传：将 dist/ 复制到 /var/www/vue-app。
  3. 配置 Nginx：
    server {
    listen 80;
    server_name vue-app.local;

    root /var/www/vue-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}
  4. 启动：
    sudo systemctl restart nginx
  • 访问：http://vue-app.local。

Vercel 部署

  1. 初始化：
    vercel
  2. 配置：选择默认设置，构建并部署。
  • 访问：部署完成后访问 Vercel 提供的 URL。

优化与注意事项

优化

  • CDN 加速：
    • 将 assets/ 上传至 CDN，修改 index.html 引用。
  • 环境变量：
    • 使用 .env 文件区分开发和生产：
      # .env.production
VITE_BASE_URL=/my-app/
    • 配置 base：
      // vite.config.ts
export default defineConfig({
  base: import.meta.env.VITE_BASE_URL || '/'
});

注意事项

  1. 路由模式：
    • SPA 使用 history 模式需服务器支持重定向。
  2. 跨域问题：
    • Nginx 或 Vercel 配置代理解决 API 跨域。
  3. 缓存管理：
    • 确保静态资源文件名带 hash，避免缓存问题。

CI/CD 集成

GitHub Actions 示例

# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - run: npx vercel --prod
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
  • 配置：添加 Vercel Token 到 GitHub Secrets。

总结

Vue 3 的项目打包与静态部署通过 Vite 生成高效资源，结合 Nginx 或 Vercel 可快速上线。本节展示了打包配置和两种部署方式的实践流程，并介绍了优化和 CI/CD 集成。下一节将探讨 CI/CD 流程，完善你的部署技能！

Last Updated::