如何手把手部署VueReact项目，实现Nginx前端高效部署？

本文共计782个文字，预计阅读时间需要4分钟。

Vue和React项目部署到Nginx的核心操作包括：

一、先打好前端包

项目开发完成后，必须生成静态资源包才能部署：

• Vue 项目运行 npm run build（或 yarn build），输出默认在 dist/ 目录
• React 项目同理，执行 npm run build，也会生成 build/ 或 dist/ 目录（取决于脚手架配置）
• 确认生成的目录里有 index.html、static/（或 assets/）和各类 JS/CSS 文件
• 如需部署到二级路径（比如 /admin），Vue 项目需在 vue.config.js 中设置 publicPath: '/admin/'；React 项目则在 package.json 中加 "homepage": "/admin/"，再打包

二、把文件放到 Nginx 能访问的位置

不要直接丢进 root 或 /home 等高权限目录，避免 403 错误：

• 推荐新建独立目录，例如 /var/www/my-vue-app 或 /usr/share/nginx/html/my-react
• 将打包后的整个 dist（或 build）目录内容复制进去，不是把 dist 文件夹整个放进去
• 确保 Nginx 进程对这个目录有读取权限：可执行 chown -R nginx:nginx /var/www/my-vue-app（CentOS/RHEL）或 chown -R www-data:www-data /var/www/my-vue-app（Ubuntu/Debian）

三、关键：Nginx 配置要支持单页应用（SPA）

Vue Router 和 React Router 默认用 history 模式，刷新页面时 URL 不带 #，Nginx 必须兜底返回 index.html，否则 404：

立即学习“前端免费学习笔记（深入）”；

• 编辑 /etc/nginx/nginx.conf 或站点配置文件（如 /etc/nginx/sites-enabled/myapp）
• 在 server 块中添加或修改 location / 区块：

location / {
  root /var/www/my-vue-app;
  index index.html;
  try_files $uri $uri/ /index.html;
}

如果部署在子路径（如 /dashboard），用 alias 更稳妥：

location /dashboard {
  alias /var/www/my-react/;
  index index.html;
  try_files $uri $uri/ /index.html;
}

注意：alias 后路径末尾要加 /，且 root 和 alias 不能混用在同一 location 中。

四、顺便解决常见连带问题

上线后常遇到的几个典型情况，一并配好省得返工：

• API 跨域：在 Nginx 中代理后端请求，比如把 /api/ 转发到真实接口地址：
  location /api/ {
    proxy_pass http://192.168.1.100:8080/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
• 静态资源缓存：在 location ~* \.(js|css|png|jpg|gif|ico)$ 块中加 expires 1y; 和
• 重启生效：配置保存后，运行 nginx -t 检查语法，再执行 systemctl reload nginx（或 /usr/sbin/nginx -s reload）