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 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
用JS实现飞机大战小游戏
Jun 09 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php日历制作代码分享
2014/01/20 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
javascript基础知识讲解
2017/01/11 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
jQuery实现简单评论功能
2020/08/19 jQuery
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
新学期校长寄语
2014/01/18 职场文书
给护士表扬信
2014/01/19 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
企业党员个人自我评价
2014/09/20 职场文书
培训讲师开场白
2015/06/01 职场文书
铁人观后感
2015/06/16 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript