Apache + HTML5 History 模式

最新推荐文章于 2025-06-02 09:03:16 发布
最新推荐文章于 2025-06-02 09:03:16 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Apache 文章标签： HTML5 History 模式 Apache HTML5 History 模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guojun13598079464/article/details/81357569
本文介绍了如何在Apache环境中配置HTML5 History模式。首先在Apache文档根目录创建.htaccess文件，并复制官方示例内容。接着，确保Apache服务器读取.htaccess规则，可能需要在httpd.conf中将AllowOverride设置为ALL。注意避免不恰当的配置修改，参考相关博客文章解决配置问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第1步，在原先已经搭建完成的Apache环境中，我直接在文档路径下，新建了.htacces文件（文档路径修改成自己的）

第2步，.htacces文件里面直接copy的官网例子https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

 第3步，怎么让httpd.conf读取.htacces的规则呢，参考：

http://www.cnblogs.com/muxiaoye/p/acb5d8103ab4b1ac6ca0ab394aa8cb1b.html

 

在这里配置完成后

最低0.47元/天 解锁文章

新学期VIP享超值加赠
Vue history路由模式 apache配置上线（亲测可用）
前端开发-陈善强
10-10 1125
vue的路由默认是hash模式，默认打包一般不会有什么问题，不过hash模式由于url会带有一个#，不美观，而且在微信分享，授权登录等都会有一些坑，所以history模式也会有一些应用场景，新手往往会碰到history模式打包后页面一片空白的情况，而且没有资源加载错误的报错信息。
Apache部署web项目解决跨域问题和history模式（apache含Linux版本和Windows版本）
sinat_35121480的博客
05-23 1302
最近的一个项目是在apache上部署webxian项目，踩了很多坑。这里简单记录一下自己踩过的坑以及有一些要注意的问题，我是用的apacheWindows版本是2.4.41： （1）部署跨域问题 我来简单说一下我这个项目的跨域问题，就是在这个相当于一个纯前端的问题，然后数据都是从一个接口中获取的，然后这样部署上去的话不是同源，这就产生了跨域问题。如果想详细了解一下这个跨域问题以及原理，这里我看到这篇文章很不错分享给大家，下面是链接（侵删） 跨域问题是怎样造成的：https://www.cnblogs.
Vue Router 中的 HTML5 History 模式详解
最新发布
gitblog_00318的博客
06-02 359
Vue Router 中的 HTML5 History 模式详解 【免费下载链接】vue-router ???? The official router for Vue 2 项目地址: https://gitcode.com/gh_mi...
HTML5 history 模式
qq_42024058的博客
09-07 1880
因为vue-router默认使用hash模式，这会在URL中使用"#“来标识要跳转的目标的路径，我们可以使用路由的history模式来使”#"消失，这种模式利用history.pushStateAPI来完成URL的跳转而无须重新加载页面。 修改router目录下index.js文件，将路由改为history模式。代码如下所示： ... export default new VueRouter({ mode: 'history', ... }) 再次运行项目，你就会发现项目中所有的URL中的’"#"都
h5 history模式是什么
emma20080101的博客
12-30 1327
H5 History模式是一种前端路由的实现方式，与Hash模式不同，它利用了HTML5的history API，通过在真实url后面拼接“/”来实现路由的路径。在这种模式下，当“/”后的路径发生变化时，浏览器会重新发起请求，而不是触发onhashchange事件。// 修改浏览器地址栏显示的URL，但不刷新页面。// 处理路由变化，显示对应的内容。同时，我们还监听了浏览器的前进后退按钮事件，当用户点击这些按钮时，会触发。// 处理路由变化，显示对应的内容。函数处理路由变化，并显示对应的内容。
angular8项目使用nginx部署并使用H5history模式（用于解决那些自动过滤#号之后的url）
anyapeng的博客
08-09 392
前言 前面的项目都是使用hash模式，即带#来访问的。 不同模式（h5 history 和 hash #）两种模式之间的切换，在angular中做如下配置即可： index.html <base href="/"> ‘/’ 后面什么都不填的话 那就是你Nginx的目录名 app.module.ts import { LocationStrategy, HashLocationStrategy, PathLocationStrategy } from '@angular/common'; pr
Vue下路由History模式打包后页面空白的解决方法
12-09
同时，对于其他服务器环境（如 Apache 或 IIS），也需要相应的配置来处理 History 模式的路由。 总之，Vue Router 的 History 模式提供了更佳的 URL 体验，但部署时需要对服务器进行适当的配置，以避免页面空白的...
在nginx上部署vue项目(history模式)的方法
08-28
启用`history`模式后，前端路由的工作方式发生了变化。当用户直接输入URL或刷新页面时，浏览器会向服务器发送请求。由于此时服务器并没有对应的静态资源，因此会出现404错误。为了解决这个问题，需要对服务器进行...
详解Vue路由History mode模式中页面无法渲染的原因及解决
08-29
而 History 模式则试图提供更美观的 URL，如 `http://example.com/home`，通过 HTML5 的 History API 来实现页面的无刷新跳转。在 History 模式下，vue-router 会监听浏览器的 popstate 事件，以便在用户前进或后退...
【技能】HTML5下的history模式
Eagler_Step
12-22 607
HTML5下的history模式
Vue history路由模式 apache配置上线
dehun20100205的博客
05-02 509
1. 首先在vue项下的router.js 文件配置 mode为history模式，并且设置好对应的base选项 说明：base配置为你当前项目实际上线时所在的目录文件夹， 我这就是放在站点的根目录下的一个叫phptest的文件夹下。 2. 为了防止打包上线引入文件的路径出错, 在vue.config.js文件配置publicPath (我使用的是vue-cli3.0, 2.0的...
vue 路由history模式apache服务器配置
前台端水师的博客
06-06 1203
记录一下项目部署，使用路由history模式 vite.config.js apache 根目录下新建.htaccess文件 以上配完就可以正常访问页面
vue cli3项目发布在apache www/vue目录下并配置history路由
考拉很OK
05-05 281
vue项目打包后默认是指向服务器的根路径(比如apache默认www目录是根路径，当然也可以修改)，这种情况不需要做路径的配置，只需要做history配置，如果不是发布到根路径而是www/vue目录下，则需要做路径配置，并做history配置。一般搜索 mod_rewrite.so 能够找到，不同的服务器可能前面的红色路径不太一样。配置，否则应用会展示404页面，当然了用history路由的话也必须加 mode: 'history'；, 它指定应用的基路径，默认是根路径'/'，表示该应用是服务于。
vue路由的两种模式配置以及history模式下面后端如何配置
weixin_43021174的博客
09-25 7156
hash ——即地址栏URL中的#符号。 hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。 history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持 history模式，会出现404 的情况，需要后台配置。 1、hash模式下，...
html5离线应用流程介绍 （含 apache2下部署的配置离线应用搭建实例）
weixin_30471561的博客
07-12 194
离线应用中浏览器与服务器的交互过程 Ø 首次访问 抓包结果： 和流程有点出入 Ø 再次访问如果服务器没有更新 返回304表示该文件没有改动 抓包结果： Ø 再次访问如果服务器有更新 抓包结果： 实例 搭建环境 Windowsxp+apache2+safari...
vue解决history路由模式刷新重定向问题(apache服务器)
weixin_51952373的博客
02-28 3219
问题：vue文件打包后部署到apache服务器下，vue在history路由模式时,访问www.xx.com/about路径时刷新会导致not fount页面，这是因为 www.xx.com/about 目录不存在于服务器。 解决：apche服务器重写路由到 www.xx.com/下。然后刷新可正常访问到 about 页面 apache开启路由重写 1、配置文件开启路由重写扩展 LoadModule rewrite_module modules/mod_rewrite.so 2、在自定义虚拟主.
Vue History 模式
Libra_rookie的博客
05-19 399
一、vue项目携带一个#会对开发造成一定的影响： 微信三方登录回调地址，有#号时，接收不到code参数 微信H5支付的回调地址，不允许有# App分享，处理特殊字符时，可能会对#进行编译 有点影响美观 现在网站大多有三方登录，支付等功能，存在#，项目开发就存在很大的障碍。话不多说，开始去掉#吧。 二、去#的原理 vue把#当做自己的根目录，静态资源，比如图片。 去掉#后，要采用相对路径去引用，如果图片引用是在js内，则要采用require()方法进行引用。 去#后台渲染，请参考vue官方文档 https
apache 支持html5,如何配置apache支持html5的视频格式
weixin_42510888的博客
06-10 410
服务器环境：OS：centos 5.7httpd： Apache/2.2.3客户上传了一个调用html5的视频页面。代码如下：Video.js | HTML5 Video Player_V_.options.flash.swf = "video-js.swf";poster="http://video-js.zencoder.com/oceans-clip.png"data-setup="{}"&...
apache HTML5 History 模式 配置
weixin_41130394的博客
08-22 84
说明 使用的Apache/2.4.6 版本。文档这么写的：但是 没说IfModule 放在哪里 。httpd.conf 里面有大量的IfModule 。这样的。但是实测 无效。无法正常启动apache。 这里面直接写的 应该是引用的 mudule 包 里面你的 模块。了后来终于发现在 这里面也可...
Apache服务器安装与Vue项目history模式配置教程
为了在Apache服务器上解决Vue项目History模式下URL路径的刷新问题，需要对Apache进行URL重写配置。Apache服务器使用mod_rewrite模块来实现URL重写功能。具体操作如下： 1. 确保Apache服务器上mod_rewrite模块已经...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值