Vue项目打包并部署到Nginx服务器的完整指南

1. Vue项目打包

1.1 生产环境打包

在项目根目录下执行以下命令：

npm run build
# 或者使用yarn
yarn build

这会在项目目录下生成一个 dist 文件夹，包含所有静态资源文件。

1.2 配置环境变量

如果需要配置生产环境变量： 1. 创建 .env.production 文件 2. 添加环境变量（以 VUE_APP_ 开头）： VUE_APP_API_BASE_URL=https://api.example.com VUE_APP_ENV=production

1.3 常见打包优化

• 路由懒加载：

  const Home = () => import('./views/Home.vue')
  

• CDN引入： 在 vue.config.js 中配置：

  configureWebpack: {
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    axios: 'axios'
  }
  }
  

2. Nginx服务器配置

2.1 基本安装Nginx

Ubuntu/Debian:

sudo apt update
sudo apt install nginx

CentOS/RHEL:

sudo yum install epel-release
sudo yum install nginx

2.2 基本Nginx配置

编辑配置文件（通常在 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default）：

server {
    listen       80;
    server_name  yourdomain.com;  # 替换为你的域名或IP

    root   /path/to/your/dist;    # 替换为你的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, no-transform";
    }

    # API代理配置（如果需要）
    location /api/ {
        proxy_pass http://api-server:port/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

2.3 配置HTTPS（推荐）

1. 获取SSL证书（可以使用Let's Encrypt免费证书）
2. 修改Nginx配置：

server {
    listen 443 ssl;
    server_name yourdomain.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/privkey.pem;

    # SSL优化配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384...';
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    # 其他配置同上
}

# HTTP重定向到HTTPS
server {
    listen 80;
    server_name yourdomain.com;
    return 301 https://$host$request_uri;
}

3. 部署流程

3.1 上传文件到服务器

使用SCP或SFTP将dist目录上传到服务器：

scp -r dist/ user@yourserver:/path/to/deploy/

3.2 测试Nginx配置

sudo nginx -t

3.3 重启Nginx服务

sudo systemctl restart nginx
# 或
sudo service nginx restart

4. 常见问题解决

4.1 路由404问题

确保Nginx配置中包含：

location / {
    try_files $uri $uri/ /index.html;
}

4.2 静态资源加载失败

检查： 1. 路径是否正确（相对路径建议使用 ./ 或 / 开头） 2. Vue配置中的 publicPath 是否正确

在 vue.config.js 中：

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
}

4.3 跨域问题

在Nginx中添加代理配置：

location /api/ {
    proxy_pass http://backend-server:port/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

5. 高级配置

5.1 启用Gzip压缩

在Nginx配置中添加：

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1000;
gzip_comp_level 6;
gzip_proxied any;
gzip_vary on;

5.2 浏览器缓存控制

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, no-transform";
}

5.3 多环境部署

可以通过不同的Nginx server块实现：

# 生产环境
server {
    listen 80;
    server_name prod.example.com;
    root /var/www/prod/dist;
    # ...
}

# 测试环境
server {
    listen 80;
    server_name test.example.com;
    root /var/www/test/dist;
    # ...
}

6. 自动化部署（可选）

可以使用CI/CD工具如Jenkins、GitHub Actions或GitLab CI实现自动化部署。

示例GitHub Actions配置（.github/workflows/deploy.yml）：

name: Deploy Vue App

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Install Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '14'

    - name: Install dependencies
      run: npm install

    - name: Build production
      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_PRIVATE_KEY }}
        source: "dist/"
        target: "/var/www/html/"

    - name: Restart Nginx
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USER }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        script: sudo systemctl restart nginx

通过以上步骤，你应该能够成功将Vue项目打包并部署到Nginx服务器上。