根目录下的 Wordpress 和子目录中的 vue。用 wordpress URL 屏蔽 vue。 URL 分根和页面加载是vue的

Question

根目录下有 WordPress 站点。在子目录 calles 'vue' 中有 vue build。在 wordpress URL 中，如果 'podcaster' 或 'crowd' 不是 URL 的一部分，那么我想在不更改浏览器的情况下加载 vue 页面 URL.

下面是我的文件夹结构

Target is:

www.example.com/podcaster //display in the address bar, points to WP (var/www/html/)
www.example.com/crowd //display in the address bar, points to WP (var/www/html/)
www.example.com/username  //display in the address bar, points to VUE (var/www/html/vue)
www.example.com           //display in the address bar, points to WP (var/www/html/)

下面是WordPress根目录.htaccess:

    # BEGIN WordPress
    # The directives (lines) between "BEGIN WordPress" and "END WordPress" are
    # dynamically generated, and should only be modified via WordPress filters.
    # Any changes to the directives between these markers will be overwritten.
        <IfModule mod_rewrite.c>
            Options +FollowSymLinks -MultiViews
            RewriteEngine On
            # Rewrite rule for vue
                RewriteCond %{REQUEST_URI} !^/crowd/
                RewriteCond %{REQUEST_URI} !^/podcaster/
                RewriteRule (.+) /vue/ [L]
        
            RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
            RewriteBase /
        
            RewriteRule ^index\.php$ - [L]
            RewriteCond %{REQUEST_FILENAME} !-f
            RewriteCond %{REQUEST_FILENAME} !-d
            RewriteRule . /index.php [L]
        
        </IfModule>
        
        # END WordPress

下面是vue子目录.htaccess:

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

Answer 1

您没有说明问题的确切原因，但是...

RewriteCond %{REQUEST_URI} !/podcaster/
RewriteRule ^(.*)$ /vue/ [L,NC]

这将导致对根目录的请求在内部重写到 /vue 子目录（我假设您已将其放置在 WordPress 的 top .htaccess根目录下的文件）。您已经声明 WordPress 应该从根目录提供服务。在这种情况下，您应该将 RewriteRule 模式从 .*（0 或更多）更改为 .+（1 或更多）以避免被触发向根请求（基础 URL / 主页）。

您还需要确保重写的请求（由 WordPress 前端控制器 - 到 index.php - 在随后的代码中）不会也被重写（否则一切最终会被重写到 /vue 子目录）。我们可以通过添加另一个 condition 来检查 REDIRECT_STATUS 环境变量，该变量在初始请求中为 empty 并设置为200（如200 OK状态）后改写。

更新： 而且我怀疑您还有许多静态资源（CSS、JS、图像等）也需要排除，所以我们可能需要为这些添加文件系统检查，因此如果请求已经映射到文件（或目录）则不会重写请求。

例如，将以上几点放在一起，就变成了：

RewriteCond %{ENV:REDIRECT_STATUS} ^$
RewriteCond %{REQUEST_URI} !/podcaster/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.+) /vue/ [L]

我删除了 NC 标志，因为它在这里是多余的。另请注意，当字符串“/podcaster/”（注意斜杠）未出现在任何地方时，条件成功URL-小路。也许这不应该限于 URL 路径的 start 吗？例如。 !^/podcaster/.

此外，WordPress .htaccess 文件的其余部分在哪里？ WordPress 前端控制器（通常出现在 # BEGIN WordPress 注释标记之后的部分）应该出现在之后您的自定义指令。如果您将自定义重写放在 WordPress .htaccess 文件的末尾，在 WP 前端控制器部分之后，那么您的指令将不会执行任何操作，因为所有请求都将路由到 WordPress。

请注意，您应该将自定义指令放在 # BEGIN WordPress 注释标记之前。你不应该编辑 # BEGIN WordPress 和 # END WordPress 评论之间的代码，因为这段代码由 WordPress 维护，你的代码可能会在 WP 更新时被覆盖（除非你采取额外的步骤来防止这种情况）。无需重复 RewriteEngine 或 <IfModule> 指令。

Below is vue .htaccess which in "vue" sub directory

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

Vue .htaccess 文件不太正确（尽管应该可以正常工作）。第一个 RewriteRule 指令（这只是一个优化）不应在正则表达式中包含 vue 子目录。也就是说应该写成：

RewriteRule ^index\.html$ - [L]

因为匹配的 URL-路径是相对于包含 .htaccess 文件的文件系统路径。

事实上，您可以从此文件中删除 vue 的所有实例（这使得它更简单且更便携），前提是您还完全删除了 RewriteBase 指令。例如：

# /vue/.htaccess

RewriteEngine On

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

相对替换字符串（即上面第二个 RewriteRule 指令中的 index.html）是相对于包含 .htaccess 文件的目录（前提是您没有 RewriteBase 另有说明的指令）。所以，上面自然而然地将请求重写为 /vue/index.html 而无需显式声明目录。

根目录下的 Wordpress 和子目录中的 vue。用 wordpress URL 屏蔽 vue。 URL 分根和页面加载是vue的

Wordpress at root and vue in sub dir. Masking of vue with wordpress URL. URL points root and page load is of vue

wordpress

.htaccess

mod-rewrite

vue.js

vuejs3