Nginx部署Vue项目后刷新404问题

1.进入nginx配置目录

whereis nginx  -- 找到nginx安装目录
cd nginx/conf/ -- 进入nginx配置目录

2.编辑配置文件nginx.conf

vim nginx.conf

3.在指定位置添加代码

location / {
    root ...
    index ...
    try_files $uri $uri/ /index.html; --- 添加后解决404问题
}

4.保存配置文件,重启nginx

### 解决 Nginx 部署 Vue 项目刷新页面返回 404 错误的方案 Vue 是典型的单页应用(SPA),其路由机制依赖前端 JavaScript 控制,而非传统的服务器端路由。当使用 `history` 模式时,URL 路径如 `/about` 并不对应实际的静态文件路径。Nginx 默认会尝试查找该路径对应的文件或目录,若找不到则返回 404 错误 [^5]。 为了解决这个问题,需要在 Nginx 的配置中设置 `try_files` 指令,将所有请求重定向到 `index.html`,从而由 Vue 自身处理路由逻辑 [^1]。 #### 修改 Nginx 配置 以下是一个完整的配置示例: ```nginx server { listen 80; server_name your_domain; # Vue 项目的根目录 root /path/to/your/vue/dist; index index.html; location / { try_files $uri $uri/ /index.html; } # 可选:优化静态资源加载 location ~ \.(js|css|png|jpg|gif|ico|woff2|woff|ttf|svg)$ { expires max; log_not_found off; } } ``` 上述配置中的关键点是 `try_files $uri $uri/ /index.html;`,它表示如果请求的文件或目录不存在,则跳转到 `index.html`,从而让 Vue Router 接手后续的路由处理 [^2]。 #### 其他注意事项 - **路径一致性**:确保 `root` 指向的目录与 Vue 项目打包后的输出目录一致,通常是 `dist` 文件夹。 - **权限问题**:检查 Nginx 是否有权限访问该目录,必要时调整文件权限或用户组 [^3]。 - **缓存清理**:浏览器缓存可能导致旧配置生效,建议清除缓存或使用隐身模式测试。 - **重启服务**:修改配置后需重启 Nginx 以使更改生效: ```bash sudo systemctl restart nginx ``` #### 验证效果 部署完成后,直接访问子路由路径(如 `/about` 或 `/article/123`)并刷新页面,应能正常显示内容而不再出现 404 错误 [^4]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值