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 相关文章推荐
Javascript 汉字字节判断
Aug 01 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php 短链接算法收集与分析
2011/12/30 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
在Django的通用视图中处理Context的方法
2015/07/21 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
一些Unix笔试题和面试题
2012/09/25 面试题
小学生新学期寄语
2014/01/19 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
行政经理岗位职责
2015/04/15 职场文书
话题作文之成长
2019/12/09 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL