为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 On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /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 On
    RewriteBase /balance/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /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