Vuepress 1.x: Use vuepress-plugin-clean-urls to Remove .html File Extension and Trailing Slash

May 21, 2019

vuepress-plugin-clean-urls try to solve 2 issues

  • Redirect /about.html to /about (remove .html file extension)
  • Redirect /privacy/ to /privacy (remove trailing /)

NOTE: VuePress Remove .html Extension From Pages Route.

Install & Setup vuepress-plugin-clean-urls

yarn add vuepress-plugin-clean-urls

Edit docs/config.js.

module.exports = {
  plugins: {
    'clean-urls': {
      normalSuffix: '',
      indexSuffix: '',
    },
  }
}

vuepress-plugin-clean-urls Caveats: 21 May 2019

Main page fail to load

Main page cannot be loaded on http://localhost:8080 when indexSuffix: ''

NOTE: Reported issue.

This could solve by edit docs/README.md with

---
permalink: /
---

NOTE: Reported issue.

Markdown linking

[/privacy](/privacy) -> `/pricavy`

[/privacy/](/privacy/) -> `/privacy/`

[./privacy.md](./privacy.md) -> `/privacy.html`

[./about/README.md](./about/README.md) -> `/about/`

NOTE: With about/README.md setup, /about/ will return 404.

Navlink

module.exports = {
  themeConfig: {
    nav: [
      { text: 'Privacy', link: '/privacy/' },   // -> /privacy/
      { text: 'Privacy', link: '/privacy' },    // -> privacy.html
      { text: 'Privacy', link: '/privacy.md' }, // -> privacy.html
    ]
  }
}

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.