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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
javascript内置对象操作详解
Feb 04 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
js实现日历与定时器
Feb 22 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
vue 导航守卫和axios拦截器有哪些区别
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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
php 设计模式之 工厂模式
2008/12/19 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
关于Python面向对象编程的知识点总结
2017/02/14 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Python: 传递列表副本方式
2019/12/19 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
介绍一下MD5加密算法
2016/11/12 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
个人贷款承诺书
2014/03/28 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
高中英语教学反思范文
2016/03/02 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技