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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
js实现限定范围拖拽的示例
Oct 26 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数据类型之布尔型的介绍
2013/04/28 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python中字典的基础知识归纳小结
2015/08/19 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python的Lambda函数用法详解
2019/09/03 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
django rest framework 过滤时间操作
2020/07/12 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
大学生职业规划论文
2014/01/11 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
战友聚会主持词
2014/04/02 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
幼儿园辞职书
2015/02/26 职场文书
2015年幼师工作总结
2015/04/28 职场文书
圣诞晚会主持词
2015/07/01 职场文书
小学语文国培研修日志
2015/11/13 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python