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 相关文章推荐
jQuery实现id模糊查询的小例子
Mar 19 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
基于jquery实现五星好评
Nov 18 jQuery
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
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中常用的预定义变量小结
2012/05/09 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Python切片操作深入详解
2018/07/27 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Python 随机按键模拟2小时
2020/12/30 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
总经理工作职责范文
2014/03/14 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
生态养殖创业计划书
2014/05/06 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
2015年元旦标语大全
2014/12/09 职场文书
求职意向书范本
2015/05/11 职场文书
会议营销主持词
2015/07/03 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书