项目部署到服务器上,刷新页面报404

本文讲述了项目部署后遇到404错误的解决方法,关键在于将history模式的路由配置到nginx的try_files中,以确保正确解析URL。

项目部署后,刷新页面出现404错误,在本地运行则正常。
在这里插入图片描述
原因:项目的路由不是采用hash模式(访问路径中间加#),而是采用了history模式(/A/B)。因此,需要在 nginx.conf配置文件中,加上try_files配置即可,例如:

server{
    listen 3000;
    server_name  localhost;
    location / {
        root   /opt/project/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}
### 3.1 Vue 项目部署Nginx 页面刷新 404 错误的原因 当 Vue 项目使用 `vue-router` 的 `history` 模式时,URL 中不再包含 `#` 符号,这使得 URL 更加美观。然而,这种模式在部署Nginx 后,刷新页面时会出现 404 错误。其根本原因是 `history` 模式下的路由路径并不是服务器上的真实文件路径,Nginx 在接收到请求时会尝试查找对应的静态文件,但由于这些路径并不存在,因此返回 404 错误 [^2]。 ### 3.2 解决方案一:配置 Nginx 重写规则 在 Nginx 配置文件中,可以通过 `try_files` 指令将所有请求重定向到 `index.html`,由 Vue 路由器处理具体的路由逻辑。该配置确保即使刷新页面,请求也会被正确地引导至前端路由进行处理 [^1]。 ```nginx location / { try_files $uri $uri/ /index.html; } ``` 如果 Vue 项目部署在子路径下(如 `/frontend`),需要对子路径进行特别配置,确保 `try_files` 指向正确的 `index.html` 文件 [^3]。 ```nginx location /frontend { index index.html index.htm; try_files $uri $uri/ /frontend/index.html; } ``` ### 3.3 解决方案二:使用 `rewrite` 规则 另一种方法是通过 `rewrite` 指令将所有不存在的文件请求重写到 `index.html`。该方法适用于更复杂的 URL 结构,确保即使路径中包含参数,也能被正确地重定向到前端路由 [^5]。 ```nginx if (!-e $request_filename) { rewrite ^(.*)$ /index.html?s=$1 last; break; } ``` ### 3.4 解决方案三:使用 `location @router` 自定义路径处理 在某些情况下,可能需要更精细地控制请求的处理方式。可以通过定义一个自定义的 `location @router` 块,并在主 `location /` 中使用 `try_files` 引用该自定义路径,将所有非文件请求重定向到 `index.html` [^4]。 ```nginx location / { try_files $uri $uri/ @router; index index.html index.htm; } location @router { rewrite ^.*$ /index.html last; } ``` ### 3.5 前端配置建议 为了确保 Vue 项目的前端配置与 Nginx 的路径匹配,建议在 `vue.config.js` 中设置 `publicPath`,并确保 `vue-router` 的 `base` 属性与部署路径一致 [^3]。 ```javascript // vue.config.js module.exports = { publicPath: '/frontend' } ``` ```javascript // router/index.js const router = new VueRouter({ mode: 'history', base: '/frontend', routes }) ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值