Vuepress: Including raw HTML files

[ChristopherPAndrews]

• [ X] I confirm that this is a issue rather than a question.

Bug report

HTML files placed in .vuepress/public are only sporadically available. Trying to navigate to them from a link elsewhere on the site results in a 404. However, reloading the page finds the content.

Version

0.14.4

Steps to reproduce

Create an .html file and place it in .vuepress/public. Create a link to it from another page on the site. try to follow the link.

What is expected?

I expect the page to load

What is actually happening?

We get a 404 error until the reload button is clicked.

Other relevant information

• Your OS:
• Node.js version:
• Browser version:
• Is this a global or local install?
• Which package manager did you use for the install?

[ulivz]

Sorry but could you create a reproduction repo, I can basically confirm that what you said above is not an issue, or our website will not work.

[BillyYccc]

Hi! I met this problem too, this is a small reproducer https://github.com/BillyYccc/vuepress-reproducer, can you please take a look at it?

[ChristopherPAndrews]

Yes, Billy's example is what I was talking about.

[BillyYccc]

@ulivz ping

[jpeyret]

Same issue here. What I did notice was that you could cp index.html README.md (and leave it as is) and it works. ln -s index.html README.md does not work. You can also create a README.md and just paste in the relevant html, tags and all, and it will work too. But handling .html files directly didn't work for me.
macOS Sierra Vuepress 0.14.9 npm 6.8.0 [email protected] global install, vuepress dev mode, node v10.15.0

[bgschiller]

@ulivz I believe this should no longer be marked "needs reproduction repo"

[bgschiller]

As a workaround, I've created the following component, to be dropped in .vuepress/components/StaticLink.vue:

<script>
export default {
  name: "StaticLink",
  render(h) {
    return h("a", { domProps: this.props }, this.$slots.default);
  }
};
</script>

Then, in a markdown file, you can use it like an a-tag, but it opts-out of vuepress' router behavior. In this example, I have a folder full of html at .vuepress/public/rdoc/

<StaticLink href="/rdoc/">Rdocs</StaticLink>

[mhyrr]

Getting the same problem here, also want to be able to reference static HTML docs from the navbar links defined in config.js. e.g.:

{ text: 'Links to HTML loaded in public folder', link: '/test.html'}

[PeppeL-G]

Me too. I have an external HTML file I need to host, but using the []() syntax in markdown to link to it doesn't work. My workaround is to write the link using the <a> element directly in the markdown file.

[darioblanco]

I have the same problem as @mhyrr, any other workaround than setting <a> elemenet in Markdown files?

[rv-bsnyder]

Has there been any movement on this?

[devnewton]

I confirm that link in navbar to an html file is broken.

[ludanxer]

So basically, you can't use relative link to navigate to HTML files place under .vuepress/public folder, which I personally believe it's expected? Because the purpose of the public file is:

You may need to provide static assets that are not directly referenced in any of your Markdown or theme components - for example, favicons and PWA icons.

Everything you place under the public folder will be simply copied into the root directory. So the HTML files won't be registered as a page in the Vue-router, which causes the 404. And when you refresh the page or navigate to it by the absolute link, the page will be correctly fetched and displayed.

As for workarounds:

If you are looking for a fully customized page (without any layout pre-defined in the VuePress), which I believe you are since you try to use HTML files. You can:

• Create a Vue SFC outside the public folder (Which I personally recommend)
• Or keep placing HTML files under the public folder and use absolute link to navigate to them

If you want the HTML files to be treated like any other MarkDown files, you can simply rename it to *.md and move it out of the public folder, because MarkDown naturally supports HTML syntax, it should be working fine for now.

I think the real issue is not navigating to HTML files underpublic, is whether to support raw HTML files like:

└── docs
    ├── .vuepress/
    ├── guide
    │   ├── test.html
    │   └── README.md
    └── README.md