docs: add DirectoryClassifier dirname cannot be the VuePress root "." or "/"

[Anderson Entwistle]

• I confirm that this is an issue rather than a question.

Bug report

Steps to reproduce

• I prepared a reproduction repo. Note that the post names are different than in the steps I outline below (2021-01-01-first.md and 2021-01-01-second.md).

• This issue doesn't need a reproduction repro, here is the steps to reproduce

  • Create a new VuePress project using npx create-vuepress-site mysite.com
  • Update the directory structure to match the VuePress-recommended directory structure
    • Move package.json and .npmignore to the project root
    • Move docs/src/ to docs/
  • Remove the create-vuepress-site default files
    • docs/index.md
    • docs/guide
    • docs/config
    • docs/.vuepress/components/
  • Edit package.json
    • Update the scripts from vuepress <dev|build> src to vuepress <dev|build> docs
    • Update the VuePress version from 1.5 to ^1.8.2
  • Install the blog plugin using npm i -D @vuepress/plugin-blog
  • Edit docs/.vuepress/config.js and add the blog plugin with a directory classifier that uses dirname: "." or dirname: "/" (see below)
  • Add posts in docs/, e.g. 2021-01-01-test.md (see below)
  • Add the default layouts Layout.vue, IndexPost.vue and Post.vue in docs/.vuepress/theme (see below)
  • Install the dependencies using npm i
  • Run the site using npm run dev
  • Navigate to a post page, e.g. http://localhost:8080/2021/01/01/test

config.js

...
plugins: [
  ...
  ["@vuepress/blog", {
    directories: [
      {
        // Unique ID of current classification
        id: 'post',
        // Target directory
        dirname: '.',
        // Path of the `entry page` (or `list page`)
        path: '/',
      },
    ],
  }],
],
...

2021-01-01-test.md

# Test
hello, world

IndexPost.vue

<template>
  <section class="index-post">
    IndexPost
    <br>
    {{ $site.pages }}
  </section>
</template>

Post.vue

<template>
  <section class="post">
    Post
    <br>
    <Content></Content>
  </section>
</template>

What is expected?

• The VuePress blog plugin rewrites the URL using the default itemPermalink
• The post is available at http://localhost:8080/2021/01/01/test and uses the Post layout

What is actually happening?

• 404 Not Found
• Although the IndexPost layout is used for http://localhost:8080, the Post layout is not used for http://localhost:8080/2021/01/01/test

Other relevant information

• Specifying itemLayout: "Post" does not work

• By moving the posts to a subdirectory of the VuePress root, e.g. docs/posts/, and updating the plugin configuration object with dirname: "posts", the Post layout is correctly used for the posts

• npx vuepress info:

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 89.0.4389.82
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @vuepress/core:  1.8.2
    @vuepress/theme-default:  1.8.2
    vuepress: ^1.8.2 => 1.8.2
  npmGlobalPackages:
    vuepress: Not Found