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 哈希表(hashtable)的简单实现
Jan 20 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php 结果集的分页实现代码
2009/03/10 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
php实现微信发红包功能
2018/07/13 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
python里大整数相乘相关技巧指南
2014/09/12 Python
python调用fortran模块
2016/04/08 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python中按值来获取指定的键
2019/03/04 Python
python 导入数据及作图的实现
2019/12/03 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
英语专业推荐信
2013/11/16 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
让世界充满爱观后感
2015/06/10 职场文书