手把手教你：Vue 项目在 Ubuntu 服务器上的 Nginx 部署全流程

一、服务器环境准备

1.更新系统

sudo apt update && sudo apt upgrade -y

 2.安装Node.js（用于构建项目）

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

 3.安装Nginx

sudo apt install nginx -y

 4.安装Git（可选，用于拉取代码）

sudo apt install git -y

二、部署Vue项目

1.构建生产版本（本地或服务器）

npm install
npm run build

生成的静态文件在 dist/ 目录

2.将文件上传到服务器（任选一种方式）

a.使用SCP上传

scp -r dist/ user@your_server_ip:/var/www/vue-project

b.或通过Git克隆到服务器

sudo mkdir -p /var/www/vue-project
sudo git clone your_repo_url /var/www/vue-project
cd /var/www/vue-project
npm install
npm run build

三、Nginx配置

1.创建配置文件

sudo nano /etc/nginx/sites-available/vue-project

2.基础配置模板（根据需求修改）

server {
    listen 80;
    server_name your_domain.com;  # 没有域名用服务器IP

    root /var/www/vue-project/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 处理Vue路由
    }

    # 可选：配置gzip压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

3.启用配置

sudo ln -s /etc/nginx/sites-available/vue-project /etc/nginx/sites-enabled/

4.测试并重启Nginx

sudo nginx -t  # 检查配置是否正确
sudo systemctl restart nginx

四、防火墙设置

sudo ufw allow 'Nginx Full'  # 开放80/443端口
sudo ufw enable

五、验证访问

浏览器访问 http://your_server_ip 或配置的域名

常见问题排查：

1.权限问题：

sudo chown -R www-data:www-data /var/www/vue-project
sudo chmod -R 755 /var/www

2.查看Nginx错误日志：

sudo tail -f /var/log/nginx/error.log

3.路由404问题：

确保Nginx配置中包含 try_files $uri $uri/ /index.html;

4.缓存问题：

构建时添加哈希版本控制（vue.config.js）：

module.exports = {
    filenameHashing: true
}

补充说明：

• 如果需要HTTPS，可以使用Let's Encrypt申请免费证书

• 建议将静态文件放在/var/www目录下保持规范

• 每次更新代码后需要重新运行 npm run build