diff --git a/.gitignore b/.gitignore
index 4835a70f..4f935904 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
 .history
 .cache
 .temp
+dist
 *.log
 node_modules
 npm-debug.log
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 750d966b..b717a158 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -3,11 +3,11 @@ import type { DefaultThemeOptions } from '@vuepress/theme-default'
 import { navbar, sidebar } from './configs'
 
 const config: UserConfig<DefaultThemeOptions> = {
-  base: '/',
+  base: '/fesjs/',
 
   evergreen: process.env.NODE_ENV !== 'production',
 
-  head: [['link', { rel: 'manifest', href: '/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/logo.png` }]],
+  head: [['link', { rel: 'manifest', href: '/fesjs/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/fesjs/logo.png` }]],
 
   // site-level locales config
   locales: {
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 8389fd01..c501b9a9 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -36,13 +36,14 @@ Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
 ## Fes.js 如何工作？
 
 ### 架构
-![架构](/framework.png "架构")
+<!-- ![架构](/framework.png "架构") -->
+<img :src="$withBase('framework.png')" alt="架构">
 
 Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
 
 ### 插件和插件集
 <p>
-    <img src="/plugins.png" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
+    <img :src="$withBase('plugins.png')" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
 </p>
 Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。
 
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index cfa0cdc0..9eee9fc7 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -54,11 +54,13 @@ npx @fesjs/create-fes-app myapp
 
 
 如果项目目录 `workspace/myapp` 已经存在，则会提示目录已存在，你可以选择 `Overwrite` 删除目录后重新创建项目，也可以选择 `Merge` 使用模板文件覆盖当前目录文件。      
-![目录已存在提示](/pickTemplateTip.png)
+<!-- ![目录已存在提示](/pickTemplateTip.png) -->
+<img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
 
 如果项目目录 `workspace/myapp` 不存在，你会被提示选取一个 template。你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。      
 
-![选择模板类型](/pickTemplate.png)
+<!-- ![选择模板类型](/pickTemplate.png) -->
+<img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
 
 ##### 步骤3 安装依赖
 <CodeGroup>
@@ -129,8 +131,8 @@ Starting the development server http://localhost:8080 ...
 
 Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
 
-![home](/home.png)
-
+<!-- ![home](/home.png) -->
+<img :src="$withBase('home.png')" alt="home">
 
 ## 部署发布
 
diff --git a/docs/reference/plugin/README.md b/docs/reference/plugin/README.md
index f18655da..da38b421 100644
--- a/docs/reference/plugin/README.md
+++ b/docs/reference/plugin/README.md
@@ -1,11 +1,12 @@
 ## 架构
 
-![架构](/framework.png "架构")
+<!-- ![架构](/framework.png "架构") -->
+<img :src="$withBase('framework.png')" alt="架构">
 
 Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
 
 ## 插件和插件集
 <p>
-    <img src="/plugins.png" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
+    <img :src="$withBase('plugins.png')" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
 </p>
 Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。
\ No newline at end of file
diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md
index 2e48a811..ba44c567 100644
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@@ -16,11 +16,15 @@
 默认是 `side`
 
 ### side
-![side](/side.png)
+<!-- ![side](/side.png) -->
+<img :src="$withBase('side.png')" alt="side">
+
 ### top
-![top](/top.png)
+<!-- ![top](/top.png) -->
+<img :src="$withBase('top.png')" alt="top">
 ### mixin
-![mixin](/mixin.png)
+<!-- ![mixin](/mixin.png) -->
+<img :src="$withBase('mixin.png')" alt="mixin">
 
 ## 启用方式
 在 `package.json` 中引入依赖：
diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md
index 8389fd01..c501b9a9 100644
--- a/docs/zh/guide/README.md
+++ b/docs/zh/guide/README.md
@@ -36,13 +36,14 @@ Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
 ## Fes.js 如何工作？
 
 ### 架构
-![架构](/framework.png "架构")
+<!-- ![架构](/framework.png "架构") -->
+<img :src="$withBase('framework.png')" alt="架构">
 
 Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
 
 ### 插件和插件集
 <p>
-    <img src="/plugins.png" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
+    <img :src="$withBase('plugins.png')" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
 </p>
 Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。
 
diff --git a/docs/zh/guide/getting-started.md b/docs/zh/guide/getting-started.md
index cfa0cdc0..032facbb 100644
--- a/docs/zh/guide/getting-started.md
+++ b/docs/zh/guide/getting-started.md
@@ -54,11 +54,13 @@ npx @fesjs/create-fes-app myapp
 
 
 如果项目目录 `workspace/myapp` 已经存在，则会提示目录已存在，你可以选择 `Overwrite` 删除目录后重新创建项目，也可以选择 `Merge` 使用模板文件覆盖当前目录文件。      
-![目录已存在提示](/pickTemplateTip.png)
+<!-- ![目录已存在提示](/pickTemplateTip.png) -->
+<img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
 
 如果项目目录 `workspace/myapp` 不存在，你会被提示选取一个 template。你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。      
 
-![选择模板类型](/pickTemplate.png)
+<!-- ![选择模板类型](/pickTemplate.png) -->
+<img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
 
 ##### 步骤3 安装依赖
 <CodeGroup>
@@ -129,7 +131,8 @@ Starting the development server http://localhost:8080 ...
 
 Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
 
-![home](/home.png)
+<!-- ![home](/home.png) -->
+<img :src="$withBase('home.png')" alt="home">
 
 
 ## 部署发布
diff --git a/docs/zh/reference/plugin/README.md b/docs/zh/reference/plugin/README.md
index f18655da..da38b421 100644
--- a/docs/zh/reference/plugin/README.md
+++ b/docs/zh/reference/plugin/README.md
@@ -1,11 +1,12 @@
 ## 架构
 
-![架构](/framework.png "架构")
+<!-- ![架构](/framework.png "架构") -->
+<img :src="$withBase('framework.png')" alt="架构">
 
 Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
 
 ## 插件和插件集
 <p>
-    <img src="/plugins.png" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
+    <img :src="$withBase('plugins.png')" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
 </p>
 Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。
\ No newline at end of file
diff --git a/docs/zh/reference/plugin/plugins/layout.md b/docs/zh/reference/plugin/plugins/layout.md
index 2e48a811..ba44c567 100644
--- a/docs/zh/reference/plugin/plugins/layout.md
+++ b/docs/zh/reference/plugin/plugins/layout.md
@@ -16,11 +16,15 @@
 默认是 `side`
 
 ### side
-![side](/side.png)
+<!-- ![side](/side.png) -->
+<img :src="$withBase('side.png')" alt="side">
+
 ### top
-![top](/top.png)
+<!-- ![top](/top.png) -->
+<img :src="$withBase('top.png')" alt="top">
 ### mixin
-![mixin](/mixin.png)
+<!-- ![mixin](/mixin.png) -->
+<img :src="$withBase('mixin.png')" alt="mixin">
 
 ## 启用方式
 在 `package.json` 中引入依赖：