vuepress

vuepress copied to clipboard

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

Bug report

Sometimes, there is no Base URL at the href attribution of <a></a> in markdown file after I set base in the /src/.vuepress/config.js.

Steps to reproduce

• Repo: https://github.com/itellboy/javascript-basic
• Website: https://itellboy.github.io/javascript-basic/welcome.html

I clicked 标准内建对象 or 表达式和操作符, it's right, but I clicked 语句和声明 or 函数, I got a wrong location.

What is expected?

The location in markdown file would be add Base URL that I set in base.

What is actually happening?

I have no idea how to fix it by configuration.

• Here is code

**HERE IS CATALOG**

* [标准内建对象](/built-in-objects/)
* [表达式和操作符](/expressions-operators/)
* [语句和声明](/statements-declarations/)
* [函数](/functions/)
* [TypeScript](/typescript/)

• After building.

Other relevant information

No.

• Output of npx vuepress info in my VuePress project:

Environment Info:

System: OS: macOS 10.14.6 CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz Binaries: Node: 10.16.3 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.11.2 - /usr/local/bin/npm Browsers: Chrome: 76.0.3809.132 Firefox: 68.0.2 Safari: 12.1.2 npmPackages: @vuepress/core: 1.1.0 @vuepress/theme-default: 1.1.0 vuepress: ^1.1.0 => 1.1.0 npmGlobalPackages: vuepress: Not Found

Thanks a lot :)

Links with URL starting with / means the root of the domain. If the path to a webpage is my-domain.com/movies/james-bond, then the link /titanic on this webpage would lead to my-domain.com/titanic. If you want it to lead to my-domain.com/movies/titanic instead, then skip the / in the beginning, i.e. just use the link titanic.

Links with URL starting with / means the root of the domain. If the path to a webpage is my-domain.com/movies/james-bond, then the link /titanic on this webpage would lead to my-domain.com/titanic. If you want it to lead to my-domain.com/movies/titanic instead, then skip the / in the beginning, i.e. just use the link titanic.

Thank you~☺️, it works. But why are there two different outputs with a same code style?

Not sure what you mean, but when you run it locally on your own computer the root URL is simply /, so you can use / in the beginning of your URLs to refer to the root. When you deploy it on the server, the root instead becomes /javascript-basic/ (in your case), and then URLs starting with / won't work anymore.

Instead of using relative links that doesn't start with /, you could use the $withBase() helper:

https://vuepress.vuejs.org/guide/assets.html#base-url

Not sure what you mean, but when you run it locally on your own computer the root URL is simply /, so you can use / in the beginning of your URLs to refer to the root. When you deploy it on the server, the root instead becomes /javascript-basic/ (in your case), and then URLs starting with / won't work anymore.

Instead of using relative links that doesn't start with /, you could use the $withBase() helper:

https://vuepress.vuejs.org/guide/assets.html#base-url

It's so weird. I built again without any change, and it worked. All links were added the prefix/javascript-basic(in my case). For example, [bar](/foo) became <a href="/javascript-basic/foo">bar<a>.

Yea, it works locally. I know that it locally redirects to URLs with the base path added.

For example, I have a VuePress project with the base path /course-material/. On the webpage http://localhost:8080/course-material/courses/git/ I can have the following link: /lectures/git-basics/. When I click on this link, I go to http://localhost:8080/lectures/git-basics/, but the server immediately redirects me to http://localhost:8080/course-material/lectures/git-basics/. This redirection doesn't work when you deploy on a real server, so you should not use it, even though it works locally.

I also know that one can go to http://localhost:8080/lectures/git-basics/ to view the page directly (without the base path), so locally VuePress understands links both with and without base paths, but it doesn't do that when you deploy it on a server with a base path (because without the base path it's not your VuePress application that receives the request).

Yea, it works locally. I know that it locally redirects to URLs with the base path added.

For example, I have a VuePress project with the base path /course-material/. On the webpage http://localhost:8080/course-material/courses/git/ I can have the following link: /lectures/git-basics/. When I click on this link, I go to http://localhost:8080/lectures/git-basics/, but the server immediately redirects me to http://localhost:8080/course-material/lectures/git-basics/. This redirection doesn't work when you deploy on a real server, so you should not use it, even though it works locally.

I also know that one can go to http://localhost:8080/lectures/git-basics/ to view the page directly (without the base path), so locally VuePress understands links both with and without base paths, but it doesn't do that when you deploy it on a server with a base path (because without the base path it's not your VuePress application that receives the request).

Umm.. I am afraid I disagree with you. Now it works both on a server and locally.

When I write [bar](/foo) with markdown gramma, VuePress would directly compile this markdown file to <a href="[/BasePath]/foo">bar</a> instead of directing after clicking.

What made me mess is last compilation was wrong. Both of its appeared, <a href="[/BasePath]/foo">bar</a> and <a href="/foo">bar</a>. Until I compiled it again, only <a href="[/BasePath]/foo">bar</a> that I expected appeared. I think the some official mates would relpy me.

Anyway, thank you a lot also :).

And do you use WeChat or some other social app? I want to make friends with you~🙈

That behavior sounds desirable, but I don't see it in my VuePress app. I have the following config.js:

module.exports = {
	base: "/course-material/",
	// ...
}

And when I have the following code in a markdown file:

[Git Basics](/lectures/git-basics)

It is compiled to:

<a href="/lectures/git-basics">Git Basics</a>

At least, that's how it works in development. Maybe the base path only is added in production?

Sorry, I'm not social ^^'

That behavior sounds desirable, but I don't see it in my VuePress app. I have the following config.js:

module.exports = {
	base: "/course-material/",
	// ...
}

And when I have the following code in a markdown file:

[Git Basics](/lectures/git-basics)

It is compiled to:

<a href="/lectures/git-basics">Git Basics</a>

At least, that's how it works in development. Maybe the base path only is added in production?

Sorry, I'm not social ^^'

It's interesting so much. Which version is the VuePress you've installed?

Before I had vuepress 1.0.3, then when you said it worked for you I updated to vuepress 1.1.0, but I have had the same problem with both of them.

Before I had vuepress 1.0.3, then when you said it worked for you I updated to vuepress 1.1.0, but I have had the same problem with both of them.

I built a new project to test it and I found something.

I set base path like this:

{
  base: '/foo/',
}

I wrote markdown file like this:

[This is a link](/bar)

[This is another link](/bar/)

Then I built it and I got this:

<p>
 <a href="/bar">This is a link</a>
 <a href="/foo/bar/">This is another link</a>
</p>

I think the last / is a key to solve the problem.

I don't find some description about it on the official website.

You're right, when I added / at the end it started to work for me. I guess it's kind of documented here, but the behavior is really unexpected.

Thanks for your effort, now this no longer needs to bug me :)

thank you @itellboy @PeppeL-G for reproducing this confusing issue and finding a workaround. I think it's non obvious and should be mentioned in the documentation. vuepress seems to have a fetish with the trailing slash.

Wow, this is extremely unintuitive, I was going crazy triple-reading the docs and not understanding what I needed to change.

Thank you for clearing it up ❤️