vue框架下部署上线后刷新报404问题的解决方案(推荐)
RewriteEngineOn RewriteBase/ RewriteRule^index\.html$-[L] RewriteCond%{REQUEST_FILENAME}!-f RewriteCond%{REQUEST_FILENAME}!-d RewriteRule./index.html[L]
nginx配置
location/{ try_files$uri$uri//index.html; }
vuehistory模式下nginx配置
服务端nginx的一开始配置如下(假设域名为:xx.xxx.com):[*****~]#cat/Data/app/nginx/conf/vhosts/xx.xxx.com.conf
server{ listen80; server_nametestwx.wangshibo.com; root/Data/app/xqsj_wx/dist; indexindex.html; access_log/var/log/testwx.logmain; }
修改如下:
server{ listen80; server_nametestwx.wangshibo.com; root/Data/app/xqsj_wx/dist; indexindex.html; access_log/var/log/testwx.logmain; ##注意从这里开始 location/{ try_files$uri$uri/@router; indexindex.html; } location@router{ rewrite^.*$/index.htmllast; } }
原生Node.js
consthttp=require('http') constfs=require('fs') consthttpPort=80 http.createServer((req,res)=>{ fs.readFile('index.htm','utf-8',(err,content)=>{ if(err){ console.log('Wecannotopen"index.htm"file.') } res.writeHead(200,{ 'Content-Type':'text/html;charset=utf-8' }) res.end(content) }) }).listen(httpPort,()=>{ console.log('Serverlisteningon:http://localhost:%s',httpPort) })
基于Node.js的Express
对于Node.js/Express,请考虑使用connect-history-api-fallback中间件
InternetInformationServices(IIS)
安装IISUrlRewrite
在你的网站根目录中创建一个web.config文件,内容如下:
Caddy
rewrite{ regexp.* to{path}/ }
Firebase主机
在你的firebase.json中加入:
{ "hosting":{ "public":"dist", "rewrites":[ { "source":"**", "destination":"/index.html" } ] } }
最后
给个警告,因为这么做以后,你的服务器就不再返回404错误页面,因为对于所有路径都会返回index.html文件。为了避免这种情况,你应该在Vue应用里面覆盖所有的路由情况,然后在给出一个404页面。
constrouter=newVueRouter({ mode:'history', routes:[ {path:'*',component:NotFoundComponent} ] })
总结
以上所述是小编给大家介绍的vue框架下部署上线后刷新报404问题的解决方案(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。