我们在用vue,或者react做单页应用的时候,部署到线上的时候,一般采用nginx作为web服务器,之前也部署过nodejs项目,用的PM2+Nginx,(用PM2启动,Nginx做反向代理),单页应用还没尝试过,第一次部署单页应用也遇到了不少问题,不过在悉心的请教和搜索,查找相关问题下面,解决了问题.在此做一个简单的笔记记录,加深自己的印象.
我们在开发单页应用的时候,一般都是分为不同的环境,开发环境和线上环境会有不同的配置文件,开发环境,我们要方便调试,进行热更新,懒加载,显示报错信息等.线上环境则需要压缩代码,屏蔽错误提示,提高性能等.所有我们会执行不同的配置文件进行打包生成.这里我就不多说啦.网上有很多相关的教程,大家可以自行参考学习.
部署VUE版本的项目的时候,(vue-router有两种模式):
hash模式
即地址栏URL中的#符号比如这个url:http://www.abc.com/#/hello,hash的值为#/hello.它的特点在于:hash虽然出现在url中,但不会被包括在http请求中,对后端完全没有影响,因此改变hash不会重新加载页面.
history模式
利用了HTML5 History Interface中新增的pushState()和replaceState方法(需要特定浏览器支持)
这两个方法引用于浏览器的历史记录栈,在当前已有的back,forward,go的基础之上,他们提供了对历史记录进行修改的功能.只是当他们执行修改时,虽然改变了当前的URL,但浏览器不会立即向后端发送请求.
因此可以说,hash模式和history模式都属于浏览器自身的特性,Vue-Router只是利用了这两个特性(通过调用浏览器提供的接口)来实现前端路由.
由于VUE版本项目采用的是hash路由模式,nginx配置值做了接口请求的代理.
location /api {
proxy_pass http://admintest.happymmall.com;
proxy_redirect default;
}
没有问题,访问的时候,地址栏上面也有对应的#,nginx里面只需做简单的配置即可.
而在React+React-router做SPA项目,点击路由出现404页面
路由模式为BrowserHistory,在Nginx下访问项目,默认地址为:http://firekylin.901web.com/,点击路由http://firekylin.901web.com/goods就报错
问题分析
这是因为nginx访问firekylin.901web.com/goods会去找goods.html,实际上我们是没有这个文件的,所有内容都是通过路由去渲染React组件,自然会报404错误.
解决方法
通过配置nginx,访问任何URI都指向index.html,浏览器上的path,会自动被React-router处理,进行无刷新跳转
配置文件参考如下:
server {
listen 80;
server_name firekylin.901web.com;
index index.html;
root /www/html/firekylin.901web.com;
location / {
try_files $uri $uri/ /index.html;
}
location /manage {
proxy_pass http://admintest.happymmall.com;
proxy_redirect default;
}
}
最后附上不同版本的访问地址,项目接口都是同一套,慕课网实战课程,作为业余自学之后进行了实践,然后部署到了线上:
Vue+Element UI: VUE版本访问地址
React+Bootstrap: React版本访问地址
再次刷新页面,完美解决~没有报404错误啦.有时候还是要懂点后端和服务端的相关知识,这样的话自己就会少走弯路少采坑.
每当自己多一分努力,也许就会少一次求助于他人.愿自己的折腾没有白费.😝