使用react,vue等开发的项目因为是前后端分离,所有打包发布到服务器以后,需要放在一个静态服务器中运行
配置Nginx服务器:
cd /etc/nginx/conf.d
vim demo.confg
添加如下信息:
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:
service nginx restart
重启以后访问你的域名或者IP就可以正常访问项目
注意事项:
当你使用了react-router的browserHistory模式或者使用了vue-router的history模式刷新页面会出现404的情况
解决方法:
修改Nginx配置信息如下:
location / {
try_files $uri $uri/ /index.html;
}
原理:
因为我们的项目只有一个根入口,当输入类似/home的url时,找不到这个页面,这时nginx会尝试加载index.html,加载index.html之后,react-router或vue-router就能起作用并匹配我们输入的/home路由,从而显示正确的home页面