最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index . html页面空白,刷新当前路由404…用反应做的项目也同样遇到类似问题。现在我们一起讨论下单页面如何部署到服务器?
由于前端路由缘故,单页面应用应该放到nginx或者apache tomcat等网络代理服务器中,千万不要直接访问index . html,同时要根据自己服务器的项目路径更改反应或vue的路由地址。
如果说项目是直接跟在域名后面的,比如:http://www.sosout.com,根路由就是‘/?br/>
如果说项目是直接跟在域名后面的一个子目录中的,比如:http://www.sosout.com/children ,根路由就是/孩子,不能直接访问index . html .
以配置Nginx为例,配置过程大致如下:(假设:
1项目文件目录:/mnt/html/水疗中心(spa目录下的文件就是执行了npm运行dist后生成的dist目录下的文件)
2,访问域名:spa.sosout.com)
进入nginx.conf新增如下配置:
服务器{
听80;
server_name spa.sosout.com;
根/mnt/html/水疗中心;
指数index . html;
~ ^/图标\位置。ico $ {
根/mnt/html/水疗中心;
}
位置/{
try_files uri uri//index . html美元;
proxy_set_header主机主机美元;
proxy_set_header X-Real-IP remote_addr美元;
proxy_set_header X-Forwarded-For proxy_add_x_forwarded_for美元;
proxy_set_header X-Forwarded-Proto美元计划;
}
access_log/mnt/日志/nginx/访问。日志主要;
}
注意事项:
1,配置域名的话,需要80端口,成功后,只要访问域名即可访问的项目
2,如果你使用了react-router的browserHistory模式或vue-router的历史模式,在nginx配置还需要重写路由:
服务器{
听80;
server_name spa.sosout.com;
根/mnt/html/水疗中心;
指数index . html;
~ ^/图标\位置。ico $ {
根/mnt/html/水疗中心;
}
位置/{
try_files uri uri美元/@fallback;
指数index . html;
proxy_set_header主机主机美元;
proxy_set_header X-Real-IP remote_addr美元;
proxy_set_header X-Forwarded-For proxy_add_x_forwarded_for美元;
proxy_set_header X-Forwarded-Proto美元计划;
}
位置@fallback {
重写^。* $/索引。html打破;
}
access_log/mnt/日志/nginx/访问。日志主要;
}
为什么要重写路由?因为我们的项目只有一个根入口,当输入类似/家庭的url时,如果找不到对应的页面,nginx会尝试加载index . html,这是通过react-router或vue-router就能正确的匹配我们输入的/home路由,从而显示正确的家页面,如果browserHistory模式或历史模式的项目没有配置上述内容,会出现404年的情况。
简单举两个例子,一个vue项目一个反应项目:
vue项目:
域名:http://tb.sosout.com
############
#其他配置
############
http {
############
#其他配置
############
服务器{
听80;
server_name tb.sosout.com;
根/mnt/html/结核病;
指数index . html;
~ ^/图标\位置。ico $ {
根/mnt/html/结核病;
}
位置/{
try_files uri uri美元/@fallback;
指数index . html;
proxy_set_header主机主机美元;
proxy_set_header X-Real-IP remote_addr美元;
proxy_set_header X-Forwarded-For proxy_add_x_forwarded_for美元;
proxy_set_header X-Forwarded-Proto美元计划;
}
位置@fallback {
重写^。* $/索引。html打破;
}
access_log/mnt/日志/nginx/访问。日志主要;
}
############
#其他配置
############
}
从“. ./App”进口程序//首页
const回家=r=比;要求。确保([],()=比;r(要求(“. ./页面/home/指数”)),“家”)//物流
const物流=r=比;要求。确保([],()=比;r(要求(“. ./页面/物流/指数”)),“物流”)//购物车
const车=r=比;要求。确保([],()=比;r(要求(“. ./页面/车/指数”)),“购物车”)//我的
const profile=r=比;要求。确保([],()=比;r(要求(“. ./页面/资料/指数”)),“配置文件”)//登录界面
const登录=r=比;要求。确保([],()=比;r(要求(“. ./页面/用户/登录”)),“登录”)
出口违约({
路径:“/?
组件:应用,//顶层路由,对应的index . html
孩子们:[{
路径:/home,//首页
组件:回家
},{
路径:/物流,//物流
组件:物流、
元:{
登录:真
}
},{
路径:/车,//购物车
组件:购物车,
元:{
登录:真
}
},{
路径:/配置文件,//我的
组件:概要
},{
路径:/登录',//登录界面
组件:登录
},{
路径:“*”,
重定向:“/home”
})
}]
