React.js Vue.js 项目部署页面刷新404

Sukoshi 发布于

使用react,vue等开发的项目因为是前后端分离,所有打包发布到服务器以后,需要放在一个静态服务器中运行

配置Nginx服务器:
1
2
cd /etc/nginx/conf.d
vim demo.confg

添加如下信息:

1
2
3
4
5
6
7
8
9
10
server {
listen 80;
server_name your.domain.com;

location / {
try_files $uri $uri/ /index.html;
root your project path;
index index.html index.htm;
}
}
重启Nginx:
1
service nginx restart

重启以后访问你的域名或者IP就可以正常访问项目

注意事项:

当你使用了react-router的browserHistory模式或者使用了vue-router的history模式刷新页面会出现404的情况

解决方法:

修改Nginx配置信息如下:

1
2
3
location / {
try_files $uri $uri/ /index.html;
}

原理:

因为我们的项目只有一个根入口,当输入类似/home的url时,找不到这个页面,这时nginx会尝试加载index.html,加载index.html之后,react-router或vue-router就能起作用并匹配我们输入的/home路由,从而显示正确的home页面

参考地址:https://segmentfault.com/q/1010000005155831