Apache 适配 Vue3 History 模式

# Apache 适配 Vue3 History 模式

前语：网站已经大致成型，但是有点小问题，在此研究一下。问题是网站刷新时会出现路由丢失404问题。现在要对apache进行修复。服务器是Ubuntu server ，Ubuntu apache配置文件没有所谓的`/etc/httpd.conf/`,取而代之的是`/etc/apache2/apache2.conf`。

## 一、开启Apache 重写模块

###### 1.为什么要开启apache重写模块？

- 本质是为了**用正则规则动态操控 URL**，解决伪静态、SEO、域名迁移、防盗链、路由美化等刚需，是现代网站部署的基础能力。

- 单页应用（SPA）路由支持，把所有请求重写到 `index.html`，由前端路由接管。

- 多域名统一（规范主域名）`www.xxx.com` 和 `xxx.com` 统一跳转到主域名。

###### 2.不开启会怎样？

- 动态 URL 丑陋

- SPA history 模式无法使用，刷新 404

- **无法在 `.htaccess` 中配置路由规则**

###### 3.如何开启Apache 重写模块

1. 终端输命令：`sudo a2enmod rewrite`

2. 重启 Apache 生效：`sudo systemctl restart apache2`

## 二、修改网站配置文件

Ubuntu 站点配置默认路径：`/etc/apache2/sites-available/000-default.conf`,编辑找到 `<VirtualHost *:80>` 里面，**添加一段目录规则**：

```apacheconf
<Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride All   #允许 .htaccess 伪静态生效
    Require all granted
</Directory>
```

## 三、项目根目录建 .htaccess

apache默认根目录为：`/var/www/html`在里面新建 `.htaccess`规则文件：

```.htaccess
<IfModule mod_rewrite.c>         #如果服务器开启了重写模块，就执行下面的规则。
    RewriteEngine On             #打开重写功能
    RewriteBase /                 #根目录开始
    RewriteCond %{REQUEST_FILENAME} !-f     #如果用户访问的路径，不是一个真实存在的文件
    RewriteCond %{REQUEST_FILENAME} !-d    #并且，用户访问的路径，也不是一个真实存在的文件夹。
    RewriteRule ^(.*)$ index.html [L]        #那么，把这个请求，全部交给 index.html 处理。
</IfModule>
```

保存完成后，重启apache：`sudo systemctl restart apache2`即可验证刷新还报不报错。



> 结语：这样做的本质是让 Apache 把 “不存在的路径”，全部交给 Vue 来处理，而不是直接报 404。
> 
> 比如xxx.com/home,xxx.com/user/123,这些路径没有具体的文件，apache搜不到后会移交给vue的router来完成。