.ht访问非根目录下的VueJS

Question

我对 VueJS 的

.htaccess

有疑问。我正在使用官方文档中提供的示例。

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

事实证明，这个例子在根文件夹中运行得很好，但我的前端在另一个文件夹中，因为根文件夹上是网站的主页，不是用VueJs开发的。所以我在

/admin

文件夹中创建。目录层次结构看起来像这样：

   /
    |_ /index.php
    |_ /.htaccess (to full site)
    |_ /admin
       |_ /.htaccess (to vue)
       |_ /index.html (vue page)

问题是，如果我访问浏览器，

https://example.com/admin

可以正常工作，但是

https://example.com/admin/user

只能通过单击站点正文中包含的链接来工作，这会导致此URI，但它不适用于直接浏览器访问。只有

index.html

页面接受浏览器的直接访问。有人对如何解决这个问题有建议吗？尝试将

.htaccess

放入根文件夹而不是

/admin

文件夹中，但没有成功。我还尝试将

RewriteBase /

行替换为

RewriteBase /admin

但没有成功。

根文件夹中的

.htaccess

文件：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php

基本上删除了

.php

扩展。

Answer 1

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

如果这个

.htaccess

文件位于

/admin

子目录中，并且

/admin

是 URL 的一部分，那么应该按如下方式编写，否则，它将尝试将请求重写到文档根目录中的

/index.html

，这可能不存在。

DirectoryIndex index.html

RewriteEngine On

RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]

所做的改变：

• 完全删除

  RewriteBase

  指令。
• 从

  RewriteRule

  substitution 字符串中删除斜杠前缀。 IE。

  /index.html

  变为

  index.html

  。重写为相对路径。这是相对于包含

  .htaccess

  文件的目录的文件路径。
• 可能不需要

  DirectoryIndex

  指令，具体取决于服务器配置中的配置方式。

请注意，这将完全覆盖父/根目录中的

.htaccess

文件。

---

我也尝试将

RewriteBase /

行替换为

RewriteBase /admin

但没有成功。

这不起作用，因为

/index.html

上有斜杠前缀（

RewriteRule

substitution 字符串。

RewriteBase

仅适用于相对路径替换。

尝试将

.htaccess

放入根文件夹而不是

/admin

文件夹中，但没有成功。

您可以执行类似的操作，但您需要相应地修改指令（它不会按书面方式工作）。但是，您可能会遇到冲突，您最好将站点/配置分开。

Answer 2

如果想让Vue JS路由在非根目录下也能正常工作，可以使用以下htaccess代码：

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

如果您不知道将包含上述内容的“.htacesss”文件放在哪里：

• 对于较旧的 webpack，请将其放在 index.html 附近（在 src 文件夹中）
• 对于较新的 webpack 和 VUE CLI / VITE，请将其放入“public”文件夹中