Nginx 部署 Vue 项目：从一脸懵到溜得飞起

LotteChar

于 2025-07-17 09:24:55 发布

阅读量1.2k

点赞数 39

CC 4.0 BY-SA版权

文章标签： nginx vue.js 运维

本文链接：https://blog.csdn.net/zj0411zdh/article/details/149413844

一、开篇暴击：你是不是也遇到过这些坑？

二、认识一下这位 “部署大神”——Nginx

三、部署前的 “热身运动”

四、手把手教你 “驯服” Nginx

（一）给服务器装个 Nginx

（二）给 Nginx “制定工作手册”—— 配置文件

（二）能打开首页，但刷新页面或跳转路由时报 404

（三）资源加载失败，页面样式乱套

六、总结：从此部署不求人

一、开篇暴击：你是不是也遇到过这些坑？

家人们，谁懂啊！Vue 项目在本地跑起来那叫一个丝滑，各种动画特效行云流水，仿佛自己就是前端界的梵高。可一部署到服务器，好家伙，页面直接给你整个 “无法访问”，控制台报错像过年放鞭炮一样噼里啪啦，资源加载失败、路由跳转 404，瞬间从梵高变成了 “凡高”—— 平凡到只能高喊 “我太难了”！

别慌，今天就给你们请出部署界的 “定海神针”——Nginx。有了它，保管你的 Vue 项目在服务器上跑得比博尔特还快，稳得像老狗！

二、认识一下这位 “部署大神”——Nginx

Nginx 这哥们儿，你可以把它想象成一个超级敬业的 “门卫大爷”。用户的浏览器就像来访的客人，服务器里的各种项目就是不同的房间。客人来了，门卫大爷（Nginx）就负责引导他们去正确的房间，还能顺便检查一下 “请柬”（请求）合不合格，把那些不怀好意的 “闲杂人等”（恶意请求）拦在门外。

它的优点简直数不清：轻量级、性能好、并发能力强，关键是配置起来还不难，简直是前端开发者的福音！

Nginx logo

三、部署前的 “热身运动”

在正式开始部署之前，咱得把 “装备” 备齐了：

一台服务器（可以是云服务器，比如阿里云、腾讯云啥的，学生党还有优惠，香得很）

服务器上得有 Linux 系统（比如 Ubuntu、CentOS，别问为啥不用 Windows，就像你不会穿着拖鞋去参加马拉松一样，不合适）

你的 Vue 项目代码（这玩意儿可不能忘，不然部署个寂寞）

四、手把手教你 “驯服” Nginx

（一）给服务器装个 Nginx

咱先给服务器请个 “门卫大爷”。要是你用的是 Ubuntu 系统，打开终端，敲上这么几行命令：

sudo apt update # 给系统打个“补丁”，更新一下软件列表

sudo apt install nginx # 安装Nginx，坐等它自己鼓捣

等它安装完，输入nginx -v，要是能看到版本号，那就说明安装成功啦，是不是 so easy？

如果是 CentOS 系统，命令稍微变一下：

sudo yum install nginx # CentOS系统安装Nginx的命令

（二）给 Nginx “制定工作手册”—— 配置文件

安装好之后，咱得给 Nginx 说说该怎么工作。它的配置文件一般在/etc/nginx/nginx.conf或者/etc/nginx/sites-available/default。

用 vim 命令打开配置文件：

sudo vim /etc/nginx/sites-available/default

然后把下面这段配置代码复制进去，我给你们标上了 “翻译”，保证你看得明明白白：

server {

listen 80; # 监听80端口，就像门卫大爷守在80号门口

server_name 你的服务器IP地址; # 服务器的“门牌号”

root /var/www/你的项目文件夹名; # 你的Vue项目在服务器上的“房间号”

index index.html; # 默认打开的“房门”

# 处理Vue的路由问题，不然刷新页面可能会404，坑死个人

location / {

try_files $uri $uri/ /index.html;

}

# 处理静态资源，让加载速度飞起来

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {

expires 30d; # 给资源设个“保质期”，浏览器会缓存，省流量又快

add_header Cache-Control "public, max-age=2592000";

}

}

改完之后，按一下ESC，再输入:wq保存退出。然后输入sudo systemctl restart nginx，让 Nginx 重新 “上岗”。

（三）给 Vue 项目 “打包” 瘦身

接下来轮到咱们的 Vue 项目出场了。在你的 Vue 项目根目录下，打开终端，敲上：

npm run build # 给项目“打包”，就像把行李打包好准备托运一样

等它跑完，你的项目文件夹里会多出一个dist文件夹，这里面就是打包好的项目文件，小巧又精干。

（四）把项目 “搬” 到服务器上

现在咱要把dist文件夹里的东西传到服务器上咱们刚才在 Nginx 配置里指定的/var/www/你的项目文件夹名目录下。

可以用scp命令，就像隔空传物一样：

scp -r 本地dist文件夹路径/* 用户名@服务器IP:/var/www/你的项目文件夹名

举个例子，假设你的本地 dist 文件夹在/home/user/project/dist，服务器用户名叫ubuntu，IP 是123.45.67.89，项目文件夹名叫my-vue-app，那命令就是：

scp -r /home/user/project/dist/* ubuntu@123.45.67.89:/var/www/my-vue-app

输入服务器密码，坐等传输完成就行。

一切准备就绪，打开你的浏览器，输入服务器的 IP 地址，按下回车。如果看到你的 Vue 项目完美展示出来，恭喜你，部署成功！要是出了问题，也别慌，接着往下看。

五、常见 “绊脚石” 及解决办法

（一）页面打不开，显示 “无法连接”

这时候先检查 Nginx 是不是在运行，输入systemctl status nginx。如果没在运行，输入systemctl start nginx启动它。

（二）能打开首页，但刷新页面或跳转路由时报 404

这大概率是 Nginx 配置里没处理好 Vue 的 history 模式路由，回去看看咱们刚才配置的location /部分，是不是漏了try_files $uri $uri/ /index.html;这行代码。

（三）资源加载失败，页面样式乱套

看看服务器上项目文件夹里的文件是不是传完整了，再检查 Nginx 配置里的root路径对不对，别把 “房间号” 记错了。

六、总结：从此部署不求人

怎么样，是不是觉得用 Nginx 部署 Vue 项目也没那么难？从安装 Nginx，到配置它，再到打包上传项目，最后测试排查问题，一套流程走下来，你也能成为部署小能手。

以后再有人问你怎么部署 Vue 项目，你就可以拍着胸脯说：“小 case，看我的！” 快去试试吧，让你的 Vue 项目在服务器上尽情 “撒欢”！