ubuntu nginx部署前端项目404

### 解决 Ubuntu 上 Nginx 部署前端项目时出现的 404 错误

当在 Ubuntu 上使用 Nginx 部署 Vue 前端项目并遇到 404 错误时，通常是因为请求未能正确映射到静态资源文件。以下是详细的解决方案：

#### 检查配置文件路径设置
确保 `root` 路径指向的是构建后的生产环境目录，即包含编译好的 HTML 和 JavaScript 文件的位置。

对于 Vue CLI 构建的应用，默认情况下会生成位于 `/dist` 目录下的产物。因此，在服务器区块内应指定如下所示的根路径[^2]:

server {
    ...
    root /home/ubuntu/project/dist;
    ...
}

#### 设置默认首页文档
确认已定义了用于加载应用入口页面的索引文件列表，这有助于处理刷新浏览器后丢失路由的情况:

server {
    ...
    index index.html index.htm;
    ...
}

#### 处理单页应用程序 (SPA) 的历史模式
如果Vue Router采用history模式，则需调整location部分来支持这种导航方式。通过尝试匹配实际存在的文件或子目录；否则返回主页以让前端框架接管重定向逻辑:

server {
    ...
    location / {
        try_files $uri $uri/ /index.html;
    }
}

上述配置意味着任何未找到对应物理位置的URL都将被导向至`index.html`，从而允许前端JavaScript代码解析并呈现正确的视图组件。

#### 测试更改前重启服务
每次编辑完配置之后都应当重新启动Nginx使改动生效，并验证其运行状态良好:

sudo systemctl restart nginx
sudo systemctl status nginx

#### 确认防火墙规则开放相应端口
最后还需保证系统的防火墙策略允许外部访问所使用的HTTP(S)端口(如80,443或其他自定义值)，可通过命令查看当前规则集以及添加必要的入站连接许可。