前端项目Vue部署到Linux服务器
写在前面
很多刚入门的前端同学写完Vue项目后，卡在“怎么让外网能访问”这一步。
其实把Vue项目部署到Linux服务器并不复杂，核心就是构建静态文件 + 配置一个Web服务器。
本文将用最直白的方式，带你从头到尾跑通整个流程。
---
第一步：确认你手头的条件
执行部署前，请确认以下三样东西已经准备好：
- 一台Linux服务器（CentOS 7/8、Ubuntu 20.04+ 都行，这里以Ubuntu为例）
- 服务器已开启SSH，并且你知道IP地址和登录密码（或密钥）
- 本地Vue项目能正常
npm run dev启动，没有报错
如果你用的是宝塔面板或云服务商自带控制台，操作路径会略有不同，但原理完全一致。
---
第二步：在服务器上安装Nginx
Nginx是轻量级静态文件服务器，专门用来托管前端打包后的文件。
SSH连上服务器后，依次执行以下命令：
sudo apt update
sudo apt install nginx -y安装完成后，检查一下服务状态：
sudo systemctl status nginx如果看到 active (running) 就表示成功。
此时在浏览器输入服务器公网IP，如果出现Nginx默认欢迎页，说明Nginx正常工作。
---
第三步：构建你的Vue项目
在本地终端进入项目根目录，运行：
npm run build这条命令会在项目下生成一个 dist 文件夹（有些项目是 build 或 output），里面就是我们要部署的静态文件。
确认一下 dist/index.html 存在即可。
---
第四步：把构建产物上传到服务器
推荐使用 scp 命令直接上传，简单可靠。
在本地终端执行（记得替换IP和路径）：
scp -r ./dist/* root@你的服务器IP:/var/www/html/如果 /var/www/html/ 目录不存在，可以先登录服务器手动创建：
sudo mkdir -p /var/www/html上传完成后，登录服务器检查文件是否齐全：
ls /var/www/html/应该能看到 index.html 以及 css、js 等子文件夹。
---
第五步：配置Nginx指向你的项目
Nginx的默认站点配置文件在 /etc/nginx/sites-available/default（Ubuntu）。
备份后编辑它：
sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak
sudo vim /etc/nginx/sites-available/default将 root 行改为你的项目目录，并在 location / 里添加 try_files 解决Vue Router history模式下的刷新404问题。
一个最小配置如下：
server {
listen 80;
server_name _;
root /var/www/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}保存后测试配置是否正确：
sudo nginx -t如果输出 syntax is ok，就重启Nginx：
sudo systemctl restart nginx---
第六步：验证部署效果
现在打开浏览器，输入 http://你的服务器IP，你应该能看到Vue项目的首页。
点击页面内的链接或刷新页面，确保路由正常跳转。
如果你使用了Vue Router的history模式，刚才配置的 try_files 已经帮你解决了404问题。
如果仍出现白屏或403，检查一下文件权限：
sudo chmod -R 755 /var/www/html---
常见问题与避坑
Q1：访问IP后显示Nginx默认页，而不是我的项目。
原因：Nginx的root配置没有指向你的项目目录。检查 /etc/nginx/sites-enabled/default 里的 root 路径是否正确，并重启Nginx。
Q2：页面刷新后变空白或404。
原因：Vue Router history模式需要服务端支持。确保 location / 里加了 try_files $uri $uri/ /index.html;，并重启Nginx。
Q3：上传文件后页面样式丢失。
原因：项目中引用的静态资源路径使用了绝对路径 /，但部署到子路径下。检查 vue.config.js 中的 publicPath，如果部署在根目录则设为 '/'，如果是子目录则设为对应路径。
Q4：服务器端口80未开放。
大部分云服务商默认关闭80端口。登录云控制台，在安全组/防火墙中放行入方向的80端口。如果是宝塔，则需要在面板的安全菜单中放行。
---
总结
把Vue项目部署到Linux服务器这件事，拆开看就是：构建 -> 上传 -> 配Nginx。
只要按本文顺序操作，即使完全没接触过Linux，也能在半小时内上线自己的前端项目。
如果在操作过程中遇到其他报错，可以优先检查报错信息中的路径和权限，或者重新阅读本文的避坑部分。
记住，部署成功只是第一步，后续还可以配置域名、SSL证书、反向代理等，但那都是后话了。
先把这一步跑通，你会发现自己离全栈又近了一步。
