如何在 Apache 中配置 Vue 路由器历史模式答案

【问题标题】：How to configure Vue router history mode in Apache如何在 Apache 中配置 Vue 路由器历史模式
【发布时间】：2021-06-03 19:19:35
【问题描述】：

当我尝试在我的 /etc/httpd/conf/httpd.conf 中添加以下行时出现此错误：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Syntax error on line 228 of /etc/httpd/conf/httpd.conf:
RewriteBase: only valid in per-directory config files

我正在使用 Apache/2.4.6 (CentOS 8)

我在 httpd 文件夹中唯一更改的是：

/etc/httpd/conf/httpd.conf：

<VirtualHost *:80>
    ServerName masterseller.ph
    Redirect permanent / https://masterseller.ph
</VirtualHost>

和

/etc/httpd/conf.d/ssl.conf：

<VirtualHost *:443>
DocumentRoot "/var/www/html/masterseller/dist/"
... (+ SSL configs)
</VirtualHost>

哦，顺便说一句，我正在尝试部署我的 vue dist 文件夹（这也是我的 DocumentRoot）。

我的 Vue-Rounter：

const router = new VueRouter({
     mode: "history", 
     base: "/",
     routes
});

我正在尝试遵循并理解此说明： https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

我尝试在我的 httpd.conf 文件末尾添加“FallbackResource /index.html”，它成功了，但我无法访问我的 phpmyadmin 页面。

我错过了什么？我对这一切都不熟悉。

提前谢谢你的回答（我老板也不想要vue路由器的hash模式）

【问题讨论】：

标签： apache vue.js vuejs2 vue-router html5-history

【解决方案1】：

该错误意味着配置在基本配置文件中不起作用。在 Apache 中，您还可以在每个目录中放置“每个目录”配置。

在dist 根目录下新建一个.htaccess 文件并将配置放入其中。

.htaccessApache docs 说：

.htaccess 文件（或“分布式配置文件”）提供了一种基于每个目录进行配置更改的方法。包含一个或多个配置指令的文件被放置在特定的文档目录中，并且指令适用于该目录及其所有子目录。

【讨论】：