vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
12.89k stars 2.08k forks source link

Hydration completed but contains mismatches. #3988

Closed congmucc closed 3 months ago

congmucc commented 3 months ago

Describe the bug

Scenario:

  1. I am encountering an issue seemingly related to Server-Side Rendering (SSR). Upon entering the website, it momentarily displays a normal article page before redirecting to a 404 error. Network requests indicate a successful 200 status (as shown in the attached image), yet the frontend persistently shows a 404 page. You can inspect the project at this GitHub repository(https://github.com/congmucc/blog) or directly visit www.congmu.top. 首页
例子
  1. The browser's console logs the error, "Hydration completed but contains mismatches."

    error
  2. Locally, everything operates without any issues. However, problems emerged after configuring Nginx. My intention was to introduce multilingual functionality. Prior to making these changes, articles rendered correctly. The errors began surfacing following the adjustments made in accordance with the official documentation. The configuration details are outlined within the README document for your reference.

    Locally
  3. For insight into the configuration changes, please refer to the .vitepress/config.mts file. Notably, since its last stable operation, new additions include the locales attribute and the creation of an docs/en directory to accommodate English translations.

    content content
  4. I have searched online, checked through VitePress's issues section, and consulted the official documentation, but I haven't found relevant solutions online or in the issues. Unfortunately, I am having difficulty understanding the official documentation.

场景:

  1. 我这里出现了一个好像是ssr的错误,进入网站会闪一下正常的文章之后跳转404,网络请求中是有数据200(如下图所示),但是前端的页面总是404,项目链接:https://github.com/congmucc/blog, 您可以登录www.congmu.top进行查看

  2. 控制台会爆这个错误:Hydration completed but contains mismatches.

  3. 并且我在本地是完全没有问题的,但是配置nginx后就出现了问题,我想要添加的功能是添加多语言配置,在添加之前我是能正常显示文章的,我按照官方文档添加之后就出现了目前的错误,配置文件在我的README文档里面,您可以看一下

  4. 您可以查看文件.vitepress/config.mts来查看我的配置文件,相比于之前能正常运行新增了locales属性,以及docs/en文件夹。

  5. 我网络上搜了一下,也搜了vitepress的issues,以及官方文档,但是网络和issues没有相关的答案,官方文档我看不懂 Looking forward to getting a reply, thank you!!!

Reproduction

directly visit www.congmu.top

Expected behavior

Scenario:

  1. I am encountering an issue seemingly related to Server-Side Rendering (SSR). Upon entering the website, it momentarily displays a normal article page before redirecting to a 404 error. Network requests indicate a successful 200 status (as shown in the attached image), yet the frontend persistently shows a 404 page. You can inspect the project at this GitHub repository(https://github.com/congmucc/blog) or directly visit www.congmu.top.

  2. The browser's console logs the error, "Hydration completed but contains mismatches."

  3. Locally, everything operates without any issues. However, problems emerged after configuring Nginx. My intention was to introduce multilingual functionality. Prior to making these changes, articles rendered correctly. The errors began surfacing following the adjustments made in accordance with the official documentation. The configuration details are outlined within the README document for your reference.

  4. For insight into the configuration changes, please refer to the .vitepress/config.mts file. Notably, since its last stable operation, new additions include the locales attribute and the creation of an docs/en directory to accommodate English translations.

  5. I have searched online, checked through VitePress's issues section, and consulted the official documentation, but I haven't found relevant solutions online or in the issues. Unfortunately, I am having difficulty understanding the official documentation.

System Info

browsers

Additional context

content error 首页 Locally 例子

Validations

congmucc commented 3 months ago

Sorry, my english is bad,My expected behavior should be that the page produces the correct article information and can switch between Chinese and English languages

Zhengqbbb commented 3 months ago
DEBUG='*' pnpm run build
DEBUG='*' pnpm run preview
brc-dd commented 3 months ago

You've specified base: './' in your vite config. Relative bases are not supported. Removing it works fine.

congmucc commented 3 months ago

You've specified base: './' in your vite config. Relative bases are not supported.您已在 vite 配置中指定 base: './' 。不支持相对碱基。

那我该如何正确的设置呢?

congmucc commented 3 months ago

You've specified base: './' in your vite config. Relative bases are not supported.您已在 vite 配置中指定 base: './' 。不支持相对碱基。

So how do I set it up correctly?

brc-dd commented 3 months ago

You can just remove that line. Why did you add that? 👀

congmucc commented 3 months ago
DEBUG='*' pnpm run build
DEBUG='*' pnpm run preview

wait,I've never used this model before, so let me learn

congmucc commented 3 months ago

You can just remove that line. Why did you add that? 👀您可以删除该行。你为什么要添加它?👀

I forgot, it seemed that I wanted to set up something at the time

congmucc commented 3 months ago

You've specified base: './' in your vite config. Relative bases are not supported. Removing it works fine.

oh,this great, you're right, this problem was solved.

congmucc commented 3 months ago
DEBUG='*' pnpm run build
DEBUG='*' pnpm run preview

Thank you for your reply, the problem has been resolved

congmucc commented 3 months ago

You can just remove that line. Why did you add that? 👀

Thank you very very very much

Zhengqbbb commented 3 months ago

Remove: https://github.com/congmucc/blog/blob/191bf1cd4cc7baf420832b5dd470473c738b4779/.vitepress/config.mts#L16

congmucc commented 3 months ago

Remove: https://github.com/congmucc/blog/blob/191bf1cd4cc7baf420832b5dd470473c738b4779/.vitepress/config.mts#L16

It's been solved.,It's me who has to 'vite.config.ts' in the configuration is wrong.,Thank you.,Thank you.