Nginx 部署 Vue 前端项目实战与配置详解
在现代 Web 开发中,Vue.js 因其组件化和响应式特性成为构建单页应用(SPA)的首选框架之一。而 Nginx 凭借其高性能和稳定性,是部署这类静态资源服务的理想选择。下面我们来梳理一下从本地构建到线上运行的完整流程。
一、准备工作
1.1 开发环境
确保你的 Vue 项目在本地已经开发完成,并能通过 npm run serve 正常启动。虽然 Vue CLI 提供的本地开发服务器方便调试,但它主要用于开发阶段,并不适合直接用于生产环境,因为缺乏必要的性能优化和安全保障。
1.2 服务器环境
你需要一台安装了 Linux(如 Ubuntu 或 CentOS)的服务器。虽然 Node.js 和 npm 在最终部署时不是必需的(因为项目已打包为静态文件),但在本地构建阶段它们是必须的。请确保服务器网络通畅,能够访问外网下载依赖。
1.3 Nginx 安装
如果服务器上尚未安装 Nginx,可以通过包管理器进行安装。以 Ubuntu 为例:
sudo apt update
sudo apt install nginx
安装完成后,检查服务状态确认是否启动成功:
sudo systemctl status nginx
二、构建 Vue 项目
将 Vue 项目部署到 Nginx 前,必须先将其构建成静态文件。在项目根目录下运行以下命令:
npm run build
构建完成后,Vue CLI 会在项目根目录生成一个 dist 文件夹。这里面包含了所有生产环境所需的静态资源,包括 index.html、JavaScript bundle、CSS 样式表以及图片等。
三、上传静态文件到服务器
将 dist 文件夹中的所有文件上传至服务器的指定目录。你可以使用 SCP、FTP 或 SFTP 工具。假设我们将文件上传到 /var/www/vue-app 目录:
scp -r ./dist/* user@your_server_ip:/var/www/vue-app/
四、配置 Nginx
接下来需要编辑 Nginx 配置文件,使其能正确服务于 Vue 项目。配置文件通常位于 /etc/nginx/sites-available/ 目录下。你可以新建一个文件,例如 vue-app.conf,内容如下:
server {
listen 80;
server_name your-vue-app.com;
root /var/www/vue-app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
这里有几个关键点需要注意:
listen 80;:监听 HTTP 默认端口。server_name:替换为你的实际域名。root:指向你上传静态文件的目录。location / { try_files ... }:这是 SPA 路由的核心。由于 Vue 的路由是在前端通过 JavaScript 动态生成的,刷新页面时如果没有这个配置,Nginx 会找不到对应的物理文件而返回 404。这条指令确保所有未匹配的资源都回退到index.html,让前端路由接管。
如果你将配置放在 sites-available 下,记得创建软链接到 sites-enabled 以启用它:


