nginx配置vue 出现404

### 正确配置Nginx以避免Vue应用的404错误

#### 修改Nginx配置文件

对于Vue项目，在使用`history`模式时，所有的前端路由都应被重定向到index.html页面，由前端自行解析路径。因此，需要修改Nginx配置文件，确保任何未匹配的实际文件或目录请求都被导向至index.html。

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /path/to/your/vue-app/dist;  # 设置Vue打包后的dist目录位置
        try_files $uri $uri/ /index.html;   # 尝试查找文件，如果找不到则返回index.html处理
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

此设置能够有效防止因路径不存在而产生的404错误[^1]。

#### 检查并修正路径配置

还需确认Nginx配置中的`root`以及`alias`等参数指向的是Vue项目构建后生成的正确路径。不正确的路径设定同样会引发404错误。例如：

- `root`定义了网站根目录的位置；
- `alias`用于指定特定URL映射的具体物理路径。

确保这些值准确无误非常重要。

#### 处理静态资源加载问题

除了上述措施外，针对可能出现的静态资源加载缓慢的情况，可以考虑优化图片大小、启用Gzip压缩等功能来提升性能，但这不是直接引起404的原因所在[^2]。