vue框架下部署上线后刷新报404问题的解决方案(推荐)


Posted in Javascript onApril 03, 2019
<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

nginx配置

location / {
 try_files $uri $uri/ /index.html;
}

vue history模式下nginx配置

服务端nginx的一开始配置如下(假设域名为:xx.xxx.com): [***** ~]# cat /Data/app/nginx/conf/vhosts/xx.xxx.com.conf

server {
     listen 80;

     server_name testwx.wangshibo.com;
     root /Data/app/xqsj_wx/dist;
     index index.html;

     access_log /var/log/testwx.log main;

}

修改如下:

server {
     listen 80;

     server_name testwx.wangshibo.com;
     root /Data/app/xqsj_wx/dist;
     index index.html;
     access_log /var/log/testwx.log main;
     
 ## 注意从这里开始
     location / {
       try_files $uri $uri/ @router;
       index index.html;
     }

    location @router {
      rewrite ^.*$ /index.html last;
    }
}

原生 Node.js

const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
 fs.readFile('index.htm', 'utf-8', (err, content) => {
  if (err) {
   console.log('We cannot open "index.htm" file.')
  }
  res.writeHead(200, {
   'Content-Type': 'text/html; charset=utf-8'
  })
  res.end(content)
 })
}).listen(httpPort, () => {
 console.log('Server listening on: http://localhost:%s', httpPort)
})

基于 Node.js 的 Express

对于 Node.js/Express,请考虑使用 connect-history-api-fallback 中间件

Internet Information Services (IIS)

安装 IIS UrlRewrite

在你的网站根目录中创建一个 web.config 文件,内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
  <rewrite>
   <rules>
    <rule name="Handle History Mode and custom 404/500" stopProcessing="true">
     <match url="(.*)" />
     <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
     </conditions>
     <action type="Rewrite" url="/" />
    </rule>
   </rules>
  </rewrite>
 </system.webServer>
</configuration>

Caddy

rewrite {
  regexp .*
  to {path} /
}

Firebase 主机

在你的 firebase.json 中加入:

{
 "hosting": {
  "public": "dist",
  "rewrites": [
   {
    "source": "**",
    "destination": "/index.html"
   }
  ]
 }
}

最后

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

const router = new VueRouter({
 mode: 'history',
 routes: [
  { path: '*', component: NotFoundComponent }
 ]
})

总结

以上所述是小编给大家介绍的vue框架下部署上线后刷新报404问题的解决方案(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
jquery预加载图片的方法
May 27 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 #Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 #Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 #Javascript
elementUI多选框反选的实现代码
Apr 03 #Javascript
vue生命周期的探索
Apr 03 #Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 #Javascript
详释JavaScript执行环境与执行栈
Apr 02 #Javascript
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
非常好的js代码
2006/06/27 Javascript
css图片自适应大小
2007/11/28 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python实现给微信公众号发送消息的方法
2017/06/30 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Numpy之random函数使用学习
2019/01/29 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
Linux常见面试题
2016/10/04 面试题
党员干部承诺书
2014/03/25 职场文书
买卖合同协议书范本
2014/10/18 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
银行求职信模板
2015/03/20 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书