diff --git a/src/node/config.ts b/src/node/config.ts
index 1fac1d1b083a..be16e656cb40 100644
--- a/src/node/config.ts
+++ b/src/node/config.ts
@@ -100,6 +100,7 @@ export interface SiteConfig<ThemeConfig = any>
   srcDir: string
   site: SiteData<ThemeConfig>
   configPath: string | undefined
+  configDeps: string[]
   themeDir: string
   outDir: string
   tempDir: string
@@ -131,7 +132,11 @@ export async function resolveConfig(
   command: 'serve' | 'build' = 'serve',
   mode = 'development'
 ): Promise<SiteConfig> {
-  const [userConfig, configPath] = await resolveUserConfig(root, command, mode)
+  const [userConfig, configPath, configDeps] = await resolveUserConfig(
+    root,
+    command,
+    mode
+  )
   const site = await resolveSiteData(root, userConfig)
   const srcDir = path.resolve(root, userConfig.srcDir || '.')
   const outDir = userConfig.outDir
@@ -164,6 +169,7 @@ export async function resolveConfig(
     themeDir,
     pages,
     configPath,
+    configDeps,
     outDir,
     tempDir: resolve(root, '.temp'),
     markdown: userConfig.markdown,
@@ -186,32 +192,32 @@ async function resolveUserConfig(
   root: string,
   command: 'serve' | 'build',
   mode: string
-): Promise<[UserConfig, string | undefined]> {
+): Promise<[UserConfig, string | undefined, string[]]> {
   // load user config
   const configPath = supportedConfigExtensions
     .map((ext) => resolve(root, `config.${ext}`))
     .find(fs.pathExistsSync)
 
-  const userConfig: RawConfigExports = configPath
-    ? ((
-        await loadConfigFromFile(
-          {
-            command,
-            mode
-          },
-          configPath,
-          root
-        )
-      )?.config as any)
-    : {}
-
-  if (configPath) {
-    debug(`loaded config at ${c.yellow(configPath)}`)
-  } else {
+  let userConfig: RawConfigExports = {}
+  let configDeps: string[] = []
+  if (!configPath) {
     debug(`no config file found.`)
+  } else {
+    const configExports = await loadConfigFromFile(
+      { command, mode },
+      configPath,
+      root
+    )
+    if (configExports) {
+      userConfig = configExports.config
+      configDeps = configExports.dependencies.map((file) =>
+        normalizePath(path.resolve(file))
+      )
+    }
+    debug(`loaded config at ${c.yellow(configPath)}`)
   }
 
-  return [await resolveConfigExtends(userConfig), configPath]
+  return [await resolveConfigExtends(userConfig), configPath, configDeps]
 }
 
 async function resolveConfigExtends(
diff --git a/src/node/plugin.ts b/src/node/plugin.ts
index a5fb7cceecc7..78a4dc026cee 100644
--- a/src/node/plugin.ts
+++ b/src/node/plugin.ts
@@ -39,6 +39,7 @@ export async function createVitePressPlugin(
   const {
     srcDir,
     configPath,
+    configDeps,
     alias,
     markdown,
     site,
@@ -162,6 +163,7 @@ export async function createVitePressPlugin(
     configureServer(server) {
       if (configPath) {
         server.watcher.add(configPath)
+        configDeps.forEach((file) => server.watcher.add(file))
       }
 
       // serve our index.html after vite history fallback
@@ -244,7 +246,7 @@ export async function createVitePressPlugin(
     async handleHotUpdate(ctx) {
       // handle config hmr
       const { file, read, server } = ctx
-      if (file === configPath) {
+      if (file === configPath || configDeps.includes(file)) {
         const newData = await resolveSiteData(root)
         if (newData.base !== siteData.base) {
           console.warn(