为vue配置apache的rewrite

因为vue是前端控制跳转地址的，当跳转到一个服务器实际不存在的地址后，再在浏览器刷新当前地址，web服务器就会返回404，因此就需要在服务器端对地址进行重写。

今天前端的同事做了个新项目，需要在服务端进行一些配置，避免404问题，他们并没有服务器配置经验，自然就交给我了。当然，我也不能随便乱配，所幸vue官方还是很贴心的给出了各个web服务器应该如何进行重写配置的例子，具体参考地址：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

看着官方的配置例子，感觉还是非常轻松的。apache的配置示例如下：

<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]
</IfModule>

配置似乎很简单，于是我就将这些配置值配在了指定的VirtualHost下。重启apache后，就报错了，报的是RewriteBase: only valid in per-directory config files。对apache并不熟悉的我只能上网查资料，查了一圈资料，基本上都是说这些配置（尤其是RewriteBase）需要配置在.htaccess文件中，而其中的RewriteBase值，需要改成对应项目的相对目录，最后一个RewriteRule的配置也需要根据目录进行修改，于是我在.htaccess文件中最后的配置内容为：

RewriteEngine On
RewriteBase /balance/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /balance/index.html [L]

配置完成后，就不再报404错误了。

事情还没完，在配置好.htaccess文件后，我继续Google了之前那个错误相关的信息，因为我认为这个配置是可以写在httpd.conf文件中的。在一番查找和吃力的翻译后，我将配置写在了对应VirtualHost下的Directory里，这次配置的内容就和vue官方说的差不多了，因为官方也只是说把RewriteBase对应的地址改为项目地址，如下：

<Directory />Options Indexes FollowSymLinks Includes IncludesNOEXEC #这句话是原来的配置，和vue要做的rewrite无关RewriteEngine OnRewriteBase /balance/RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]</Directory>

分析原因（自己想的，因为对Apache配置并不了解），RewriteBase是要有一个相对目录路径的，所以要配置在Directory下，当指定了RewriteBase后，最后一条RewriteRule也就不需要像.htaccess那样再次写明项目目录了，而是直接会去找/balance/index.html

参考资料：

https://www.jb51.net/article/146180.htm

https://community.bitnami.com/t/rewritebase-only-valid-in-per-directory-config-files-after-enabling-multisite/39362

http://httpd.apache.org/docs/2.0/mod/mod_rewrite.html

https://www.jb51.net/article/39298.htm

为vue配置apache的rewrite相关推荐

Apache之Rewrite和RewriteRule规则梳理以及http强转https的配置总结
一. 简单实例介绍一般来说,apache配置好http和https后,如果想要做http强转到https,需要设置url重定向规则,大致需要下面几个步骤即可完成配置: 1)在httpd.conf文件 ...
让Apache支持Rewrite静态页面重写的方法
Apache下Rewrite静态页面重写的方法,需要的朋友可以参考下. 首先确定您使用的 Apache 版本,及是否加载了 mod_rewrite 模块. Apache 1.x 的用户请检查 conf ...
linux apache 安装 rewrite,Linux主机下Apache如何使用rewrite模块
Linux主机下Apache使用rewrite模块解决方案: 1. 需要在apache的配置文件httpd.conf中加入相应配置: Apache-1.3.x版本,在/usr/prima/apache ...
apache的rewrite模块实例操作
原文链接:http://blog.5ilinux.com/archives/2006/01/apacherewrite.html 我们的目标是把http://www.bulknews.cn/show. ...
配置apache支持PHP（win7）
wamp和lamp是PHP工程师经常使用的环境,我们今天来配置apache,让它能够和php协同工作. 1.进入apache的conf目录,打开apache的配置文件httpd.conf.(修改前建议 ...
ubuntu 16.04 apache 开启Rewrite功能
其中几个文件及目录的作用是: apache2.conf:Apache的主要配置文件,包含全局配置. conf.d:Apache全局配置文件,其他需要使用Apache的包可以在这个目录下创建文件或者链接 ...
配置Apache Httpd Server 2.2 Virtual Host UrlRewrite
配置Apache httpd server 2.2 Virtual Host: 最简单的方法: 一.打开httpd.conf,找到: #Include conf/extra/httpd-vhosts. ...
Nginx配置location及rewrite规则
Nginx配置location及rewrite规则示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location ...
nginx location 匹配多个规则_nginx配置location与rewrite规则教程
nginx配置location与rewrite规则教程 location 教程示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ...
配置apache支持django
因为工作需要做全栈开发,所以必须要搭建一个web服务器和vue进行联调,但是如果采用django自带的服务器,静态资源的处理很麻烦,前端开发还是需要处理静态资源的,所以我还是需要一个专门的web服务器 ...

为vue配置apache的rewrite

为vue配置apache的rewrite相关推荐

最新文章

热门文章