How to load public file before initialization?

[ZhongxuYang]

I have a runtime configuration file. It needs to be loaded before the page starts rendering in order for me to use the environment variables inside.(Nav link / Logo / ...)

The purpose of this is that when I build the project into a Docker Image, it can be used in multiple places. I only need to modify the public/runtime.json.

Using await fetch in defineConfig is a good way, but I don't know how to point to public/runtime.json before initialization.

[brc-dd]

you can just import it inside your config file:

// .vitepress/config.ts

import foo from '../public/runtime.json'

export default defineConfig({
  // ....
})

you can also use JSON.parse + fs.readFile

[ZhongxuYang]

you can just import it inside your config file:

// .vitepress/config.ts

import foo from '../public/runtime.json'

export default defineConfig({
  // ....
})

you can also use JSON.parse + fs.readFile

Thanks for reply!😊

But this import method does not seem to be dynamically loaded. I hope that after the project is built, it can be adapted to multiple environments by modifying runtime.json (without rebuilding).

[brc-dd]

That is likely not possible. VitePress is a "static" site generator. If you want to update the navbar, sidebar, etc. dynamically you'll need to write your own components that fetch runtime.json and generate them on each load. The config file is only loaded during build.

[ZhongxuYang]

That is likely not possible. VitePress is a "static" site generator. If you want to update the navbar, sidebar, etc. dynamically you'll need to write your own components that fetch runtime.json and generate them on each load. The config file is only loaded during build.

I see. Thank you for your patient reply.😊