RHEL8环境下如何将Vue.js应用部署到Nginx服务器？

你理解的部署流程大方向正确，但有几个关键细节需要调整，直接按你现有配置部署会出现路由刷新404的问题。

标准部署流程 #

• 1. 项目构建：在Vue项目根目录执行npm run build，命令执行完成后会在项目根目录生成dist目录，里面是经过编译、压缩、混淆后的生产环境静态资源，和你package.json里的脚本配置完全匹配。
• 2. 文件部署：将dist目录内的所有文件和子目录（注意不是把dist文件夹本身）拷贝到Nginx的站点根目录，也就是你当前配置里的/var/www/html路径，拷贝完成后该路径下应该直接存在index.html文件，而不是嵌套一层dist目录。
• 3. 权限配置：RHEL 8下Nginx默认运行用户为nginx，需要给站点目录配置对应读权限，执行命令：

chown -R nginx:nginx /var/www/html

Nginx配置修正 #

你当前的Nginx配置是给传统多页面静态站点用的，核心问题在根路径的try_files规则：Vue是单页应用（SPA），路由由前端JavaScript在浏览器端处理，当用户直接访问子路由（例如/user/profile）或者刷新子路由页面时，Nginx会在服务器上查找对应路径的物理文件，找不到就会返回404。
修正后的完整配置如下，你原有的/api/反向代理规则可以直接保留：

server {
    listen 80 default_server;
    listen [::]:80 default_server; 
    root /var/www/html;  
    index index.html; 
    server_name _;  
    location / {
        # 关键修改：找不到对应文件时统一返回index.html，交给前端路由处理
        try_files $uri $uri/ /index.html;
    }
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

配置修改完成后，依次执行以下命令校验并重载配置生效：

# 测试Nginx配置语法是否正确
nginx -t
# 测试通过后重载配置
systemctl reload nginx

注意事项 #

• 绝对不要在生产环境使用npm run serve启动服务：这个命令启动的是vue-cli内置的开发服务器，自带热更新、未压缩资源、源码映射等开发特性，性能差、存在安全风险，仅适合本地开发阶段使用。
• 如果你在vue.config.js中配置了publicPath字段，请确保该字段值和你实际部署的站点路径匹配：如果部署在域名根路径，保持默认值/即可；如果部署在子路径（例如https://yourdomain.com/app/），需要将publicPath设置为/app/，否则会出现静态资源加载404的问题。
• 部署新版本时，建议先清空/var/www/html目录下的旧文件，再拷贝新的dist内容，避免旧版本的冗余文件残留。

内容的提问来源于stack exchange，提问作者arve