diff --git a/README.md b/README.md
index fc7c9ab3..53bc2b3f 100755
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Solution of management system front-end based on `vue.js` and `ElementUI`
 
 D2Admin 是一个开源的管理系统前端集成方案
 
-[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](http://d2admin.fairyever.com/)
+[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview)
 
 [中文文档](https://fairyever.github.io/d2-admin/zh/)
 
@@ -56,6 +56,7 @@ D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https
 * 内置4种主题
 * 公用样式抽离，方便的主题定制
 * 支持百万级数据量的表格组件
+* 打包后随意目录部署（已经做好兼容设置）
 
 ## TODO
 
diff --git a/config/index.js b/config/index.js
index f067ac28..8f37da22 100755
--- a/config/index.js
+++ b/config/index.js
@@ -56,7 +56,7 @@ module.exports = {
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
     // 请根据你的站点地址修改这里
-    assetsPublicPath: '/',
+    assetsPublicPath: '/d2-admin-preview/',
 
     /**
      * Source Maps
diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md
index 6bdd28c8..94b4de70 100644
--- a/docs/zh/guide/README.md
+++ b/docs/zh/guide/README.md
@@ -2,7 +2,7 @@
 
 D2Admin 是一个开源的管理系统前端集成方案
 
-[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](http://d2admin.fairyever.com/)
+[Github仓库](https://github.com/FairyEver/d2-admin) - [预览地址](https://fairyever.gitee.io/d2-admin-preview)
 
 <div>
   <iframe src="//ghbtns.com/github-btn.html?user=FairyEver&repo=d2-admin&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
@@ -15,7 +15,9 @@ D2Admin 是一个开源的管理系统前端集成方案
 
 D2Admin 是完全开源免费的管理系统集成方案，由 [FairyEver](https://github.com/FairyEver) 在工作之余完全由兴趣驱动完成，如果你也一样喜欢前端开发，欢迎加入我们的讨论/学习群，群内可以`提问答疑`，`分享学习资料`或者随便扯淡
 
-**QQ群号 806395827 | 微信 liyang1711467488**
+**QQ群号 806395827 | 作者微信 liyang1711467488**
+
+微信群需要先加群主才可以拉进群
 
 ::: tip Thanks
 D2Admin 创建于2018年1月14日零点51分，在2018年5月26日正式发布，中间断断续续做了四个多月，发布一个月内收获将近 700star，在此对支持我的朋友表示感谢，D2Admin 将会保持更新，如果你有想法、建议、或者问题欢迎加群讨论
@@ -63,6 +65,7 @@ D2Admin 创建于2018年1月14日零点51分，在2018年5月26日正式发布
 * 内置4种主题
 * 公用样式抽离，方便的主题定制
 * 支持百万级数据量的表格组件
+* 打包后随意目录部署（已经做好兼容设置）
 
 ## TODO
 
diff --git a/src/assets/style/fixed/markdown.scss b/src/assets/style/fixed/markdown.scss
index 32438f58..cd71054f 100644
--- a/src/assets/style/fixed/markdown.scss
+++ b/src/assets/style/fixed/markdown.scss
@@ -7,7 +7,4 @@
   h1, h2 {
     border-bottom: none;
   }
-  img {
-    background-color: transparent;
-  }
 }
\ No newline at end of file
diff --git a/src/assets/style/theme/d2/setting.scss b/src/assets/style/theme/d2/setting.scss
index e9cc35e4..f4f4ef4b 100644
--- a/src/assets/style/theme/d2/setting.scss
+++ b/src/assets/style/theme/d2/setting.scss
@@ -2,8 +2,6 @@
 $theme-name: 'd2';
 // 主题背景颜色
 $theme-bg-color: #f8f8f9;
-// 主题背景图片
-$theme-bg-image: none;
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, 0);
 
diff --git a/src/assets/style/theme/line/setting.scss b/src/assets/style/theme/line/setting.scss
index e995f543..27b05f94 100644
--- a/src/assets/style/theme/line/setting.scss
+++ b/src/assets/style/theme/line/setting.scss
@@ -2,8 +2,6 @@
 $theme-name: 'line';
 // 主题背景颜色
 $theme-bg-color: #f8f8f9;
-// 主题背景图片
-$theme-bg-image: url('/static/image/bg/line-squashed.jpg');
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, 0);
 
diff --git a/src/assets/style/theme/star/setting.scss b/src/assets/style/theme/star/setting.scss
index b2f69439..f25a0a48 100644
--- a/src/assets/style/theme/star/setting.scss
+++ b/src/assets/style/theme/star/setting.scss
@@ -2,8 +2,6 @@
 $theme-name: 'star';
 // 主题背景颜色
 $theme-bg-color: #EFF4F8;
-// 主题背景图片
-$theme-bg-image: url('/static/image/bg/star-squashed.jpg');
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, .3);
 
diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss
new file mode 100644
index 00000000..ca3992f7
--- /dev/null
+++ b/src/assets/style/theme/theme.scss
@@ -0,0 +1,358 @@
+// 主题公用
+.layout-main-group {
+  height: 100%;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  // 背景上面的半透明遮罩
+  .layout-main-mask {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+  }
+  // 主体
+  .layout-main {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    // [布局] 顶栏
+    .el-header {
+      padding: 0px;
+      // logo区域
+      .logo-group {
+        transition: width .3s;
+        float: left;
+        text-align: center;
+        img {
+          height: 60px;
+        }
+      }
+      // 折叠侧边栏切换按钮
+      .toggle-aside-btn {
+        float: left;
+        height: 60px;
+        width: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @extend %unable-select;
+        i {
+          font-size: 20px;
+          margin-top: 4px;
+        }
+      }
+      // [菜单] 顶栏
+      .el-menu {
+        float: left;
+        border-bottom: none;
+        background-color: transparent;
+        .el-menu-item {
+          @extend %unable-select;
+          border-bottom: none;
+        }
+        .el-submenu {
+          @extend %unable-select;
+          .el-submenu__title {
+            border-bottom: none;
+          }
+        }
+      }
+      // 顶栏右侧的按钮
+      .d2-header-right {
+        float: right;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        .btn-text {
+          padding: 14px 12px;
+          border-radius: 4px;
+          margin: 0px !important;
+          margin-left: 10px !important;
+        }
+        .el-dropdown {
+          @extend %unable-select;
+        }
+      }
+    }
+    // [布局] 顶栏下面
+    .el-container {
+      // 侧边栏
+      .el-aside {
+        transition: width .3s;
+        overflow: auto;
+        // [菜单] 正常状态
+        .el-menu {
+          @extend %unable-select;
+          background-color: transparent;
+          border-right: none;
+          .el-menu-item {
+            i {
+              margin-right: 5px;
+              font-size: 20px;
+            }
+          }
+        }
+        .el-submenu {
+          @extend %unable-select;
+          .el-submenu__title {
+            i {
+              margin-right: 5px;
+              font-size: 20px;
+            }
+            .el-submenu__icon-arrow {
+              margin-top: -10px;
+            }
+          }
+        }
+        // 菜单为空的时候显示的信息
+        .menu-empty {
+          height: 160px;
+          margin: 10px;
+          margin-top: 0px;
+          border-radius: 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          @extend %unable-select;
+          i {
+            font-size: 30px;
+            margin-bottom: 10px;
+          }
+          span {
+            font-size: 14px;
+          }
+        }
+        // [菜单] 折叠状态
+        .el-menu--collapse {
+          background-color: transparent;
+          .el-submenu__title {
+            text-align: center;
+          }
+        }
+      }
+      .el-main {
+        padding: 0px;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+// 每个主题特有的设置
+
+.theme-#{$theme-name} {
+
+  // 背景图片和遮罩
+  .layout-main-group {
+    background-color: $theme-bg-color;
+    .layout-main-mask {
+      background-color: $theme-bg-mask;
+    }
+  }
+
+  // 菜单项目
+  @mixin theme-menu-hover-style {
+    color: $theme-menu-item-color-hover;
+    i {
+      color: $theme-menu-item-color-hover;
+    }
+    background-color: $theme-menu-item-background-color-hover;
+  }
+  .el-submenu__title {
+    @extend %unable-select;
+  }
+  .el-menu-item {
+    @extend %unable-select;
+  }
+  .el-submenu__title:hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu-item:hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu--horizontal .el-menu .el-submenu__title:hover {
+    @include theme-menu-hover-style;
+  }
+
+  // [组件] d2-container-full
+  .d2-container-full {
+    border: $theme-container-border-outer;
+    border-bottom: none;
+    background-color: $theme-container-background-color;
+    .d2-container-full__header {
+      border-bottom: $theme-container-border-inner;
+      background-color: $theme-container-header-footer-background-color;
+    }
+    .d2-container-full__footer {
+      border-top: $theme-container-border-inner;
+      background-color: $theme-container-header-footer-background-color;
+    }
+  }
+  // [组件] d2-container-card
+  .d2-container-card {
+    border: $theme-container-border-outer;
+    background-color: $theme-container-background-color;
+    .el-card__header {
+      border-bottom: $theme-container-border-inner;
+      background-color: $theme-container-header-footer-background-color;
+    }
+  }
+  
+  // 顶栏
+  .el-header {
+    // 切换按钮
+    .toggle-aside-btn {
+      i {
+        color: $theme-header-item-color;
+        background-color: $theme-header-item-background-color;
+        &:hover {
+          color: $theme-header-item-color-hover;
+        }
+      }
+    }
+    // 顶栏菜单
+    .el-menu {
+      .el-menu-item {
+        transition: border-top-color 0s;
+        color: $theme-header-item-color;
+        background-color: $theme-header-item-background-color;
+        &:hover {
+          color: $theme-header-item-color-hover;
+          background-color: $theme-header-item-background-color-hover;
+        }
+        &:focus {
+          color: $theme-header-item-color-focus;
+          background-color: $theme-header-item-background-color-focus;
+        }
+        &.is-active {
+          color: $theme-header-item-color-active;
+          background-color: $theme-header-item-background-color-active;
+        }
+      }
+      .el-submenu {
+        .el-submenu__title {
+          transition: border-top-color 0s;
+          color: $theme-header-item-color;
+          background-color: $theme-header-item-background-color;
+          .el-submenu__icon-arrow {
+            color: $theme-header-item-color;
+          }
+          &:hover {
+            color: $theme-header-item-color-hover;
+            background-color: $theme-header-item-background-color-hover;
+            .el-submenu__icon-arrow {
+              color: $theme-header-item-color-hover;
+            }
+          }
+          &:focus {
+            color: $theme-header-item-color-focus;
+            background-color: $theme-header-item-background-color-focus;
+            .el-submenu__icon-arrow {
+              color: $theme-header-item-color-focus;
+            }
+          }
+        }
+      }
+    }
+    // 顶栏右侧
+    .d2-header-right {
+      .btn-text {
+        color: $theme-header-item-color;
+        &.can-hover {
+          &:hover {
+            color: $theme-header-item-color-hover;
+            background-color: $theme-header-item-background-color-hover;
+          }
+        }
+      }
+    }
+  }
+  // [布局] 顶栏下面
+  .el-container {
+    // 侧边栏
+    .el-aside {
+      // 菜单为空的时候显示的信息
+      .menu-empty {
+        background-color: $theme-aside-menu-empty-background-color;
+        i {
+          color: $theme-aside-menu-empty-icon-color;
+        }
+        span {
+          color: $theme-aside-menu-empty-text-color;
+        }
+        &:hover {
+          background-color: $theme-aside-menu-empty-background-color-hover;
+          i {
+            color: $theme-aside-menu-empty-icon-color-hover;
+          }
+          span {
+            color: $theme-aside-menu-empty-text-color-hover;
+          }
+        }
+      }
+      // [菜单] 正常状态
+      .el-menu {
+        .el-menu-item {
+          color: $theme-aside-item-color;
+          background-color: $theme-aside-item-background-color;
+          i {
+            color: $theme-aside-item-color;
+          }
+          &:hover {
+            color: $theme-aside-item-color-hover;
+            background-color: $theme-aside-item-background-color-hover;
+            i {
+              color: $theme-aside-item-color-hover;
+            }
+          }
+          &:focus {
+            color: $theme-aside-item-color-focus;
+            background-color: $theme-aside-item-background-color-focus;
+            i {
+              color: $theme-aside-item-color-focus;
+            }
+          }
+          &.is-active {
+            color: $theme-aside-item-color-active;
+            background-color: $theme-aside-item-background-color-active;
+            i {
+              color: $theme-aside-item-color-active;
+            }
+          }
+        }
+      }
+      .el-submenu {
+        .el-submenu__title {
+          color: $theme-aside-item-color;
+          background-color: $theme-aside-item-background-color;
+          i {
+            color: $theme-aside-item-color;
+          }
+          .el-submenu__icon-arrow {
+            color: $theme-aside-item-color;
+          }
+          &:hover {
+            color: $theme-aside-item-color-hover;
+            background-color: $theme-aside-item-background-color-hover;
+            i {
+              color: $theme-aside-item-color-hover;
+            }
+            .el-submenu__icon-arrow {
+              color: $theme-aside-item-color-hover;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id
deleted file mode 100644
index 7535129a..00000000
--- a/src/assets/style/theme/theme.scss.REMOVED.git-id
+++ /dev/null
@@ -1 +0,0 @@
-7951ca687a987c2f872c6a63ac497cfc58cba7dc
\ No newline at end of file
diff --git a/src/assets/style/theme/tomorrow-night-blue/setting.scss b/src/assets/style/theme/tomorrow-night-blue/setting.scss
index 92f54dfe..afe2a8af 100644
--- a/src/assets/style/theme/tomorrow-night-blue/setting.scss
+++ b/src/assets/style/theme/tomorrow-night-blue/setting.scss
@@ -2,8 +2,6 @@
 $theme-name: 'tomorrow-night-blue';
 // 主题背景颜色
 $theme-bg-color: #002253;
-// 主题背景图片
-$theme-bg-image: none;
 // 主题背景图片遮罩
 $theme-bg-mask: rgba(#000, 0);
 
diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue
index 2fd9ed3e..20715910 100644
--- a/src/components/core/d2-layout-main/index.vue
+++ b/src/components/core/d2-layout-main/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="layout-main-group">
+  <div class="layout-main-group" :style="styleLayoutMainGroup">
     <div class="layout-main-mask"></div>
     <el-container class="layout-main">
       <!-- 顶栏 -->
       <el-header>
         <div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-          <img v-if="collapse" :src="`/static/image/theme/${themeName}/logo/icon-only.png`">
-          <img v-else :src="`/static/image/theme/${themeName}/logo/all.png`">
+          <img v-if="collapse" :src="`${$assetsPublicPath}static/image/theme/${themeName}/logo/icon-only.png`">
+          <img v-else :src="`${$assetsPublicPath}static/image/theme/${themeName}/logo/all.png`">
         </div>
         <div class="toggle-aside-btn" @click="collapse = !collapse">
           <d2-icon name="bars"/>
@@ -60,8 +60,14 @@ export default {
   },
   computed: {
     ...mapState({
-      themeName: state => state.theme.name
-    })
+      themeName: state => state.theme.name,
+      themeBackGroundImage: state => state.theme.backGroundImage
+    }),
+    styleLayoutMainGroup () {
+      return {
+        ...this.themeBackGroundImage ? {backgroundImage: `url('${this.$assetsPublicPath}${this.themeBackGroundImage}')`} : {}
+      }
+    }
   },
   mounted () {
     // 加载主题
diff --git a/src/components/core/d2-markdown/index.vue b/src/components/core/d2-markdown/index.vue
index d4f21c87..eae575b9 100644
--- a/src/components/core/d2-markdown/index.vue
+++ b/src/components/core/d2-markdown/index.vue
@@ -69,7 +69,7 @@ export default {
       const renderer = new marked.Renderer()
       renderer.blockquote = (quote) => {
         // 百度网盘
-        return (this.baidupan && bandupan(quote)) || `<blockquote>${quote}</blockquote>`
+        return (this.baidupan && bandupan(quote, this.$assetsPublicPath)) || `<blockquote>${quote}</blockquote>`
       }
       return marked(data, {
         ...this.highlight ? {highlight: (code) => highlight.highlightAuto(code).value} : {},
diff --git a/src/components/core/d2-markdown/plugin/baidupan.js b/src/components/core/d2-markdown/plugin/baidupan.js
index 4640991a..fe7b6854 100644
--- a/src/components/core/d2-markdown/plugin/baidupan.js
+++ b/src/components/core/d2-markdown/plugin/baidupan.js
@@ -1,4 +1,4 @@
-export default (quote) => {
+export default (quote, assetsPublicPath) => {
   const _quote = quote.replace(/<[^<>]+>/g, '').trim()
   const bdPanUrl = /^https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+$/i
   const bdPanUrlPwd = /^链接: https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+ 密码: [a-z0-9]{4}$/i
@@ -6,7 +6,7 @@ export default (quote) => {
     return `<div class="baidupan">
       <a href="${_quote}" class="container">
         <div class="icon">
-          <img src="/static/image/baidu-pan-logo.png">
+          <img src="${assetsPublicPath}static/image/baidu-pan-logo.png" style="background-color: transparent;">
         </div>
         <div class="url">${_quote}</div>
       </a>
@@ -18,7 +18,7 @@ export default (quote) => {
       <div class="container">
         <a href="${url[0]}">
           <div class="icon">
-            <img src="/static/image/baidu-pan-logo.png">
+            <img src="${assetsPublicPath}static/image/baidu-pan-logo.png" style="background-color: transparent;">
           </div>
           <div class="url">${url[0]}</div>
         </a>
diff --git a/src/components/core/d2-theme-list/index.vue b/src/components/core/d2-theme-list/index.vue
index 33acf16d..a4bbda40 100644
--- a/src/components/core/d2-theme-list/index.vue
+++ b/src/components/core/d2-theme-list/index.vue
@@ -2,7 +2,7 @@
   <el-table :data="themeList" v-bind="table">
     <el-table-column prop="name" align="center" width="160"/>
     <el-table-column label="预览" width="220">
-      <div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${ scope.row.preview })`}"></div>
+      <div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${$assetsPublicPath}${scope.row.preview})`}"></div>
     </el-table-column>
     <el-table-column prop="address" align="center">
       <template slot-scope="scope">
diff --git a/src/main.js b/src/main.js
index 26cfe4d3..89e7eec7 100755
--- a/src/main.js
+++ b/src/main.js
@@ -48,6 +48,8 @@ import pluginOpen from '@/plugin/open'
 // 插件 支持百万级数据的表格
 import bigdataTable from '@/plugin/vue-bigdata-table'
 
+import buildConfig from '../config/index'
+
 Vue.use(ElementUI)
 Vue.use(contentmenu)
 
@@ -61,6 +63,8 @@ Vue.config.productionTip = false
 
 Vue.prototype.$env = process.env.NODE_ENV === 'development'
 
+Vue.prototype.$assetsPublicPath = process.env.NODE_ENV === 'development' ? buildConfig.dev.assetsPublicPath : buildConfig.build.assetsPublicPath
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
diff --git a/src/pages/demo/components/markdown/url.vue b/src/pages/demo/components/markdown/url.vue
index 2f38a025..a8c4cc7b 100644
--- a/src/pages/demo/components/markdown/url.vue
+++ b/src/pages/demo/components/markdown/url.vue
@@ -1,6 +1,6 @@
 <template>
   <d2-container>
     <template slot="header">异步加载文件</template>
-    <d2-markdown url="/static/md/demo.md"/>
+    <d2-markdown :url="`${$assetsPublicPath}static/md/demo.md`"/>
   </d2-container>
 </template>
diff --git a/src/store/modules/theme.js b/src/store/modules/theme.js
index 2c34a902..322ec8ce 100644
--- a/src/store/modules/theme.js
+++ b/src/store/modules/theme.js
@@ -6,25 +6,28 @@ export default {
       {
         name: 'd2admin 经典',
         value: 'd2',
-        preview: '/static/image/theme/d2/preview@2x.png'
+        preview: 'static/image/theme/d2/preview@2x.png'
       },
       {
         name: '简约线条',
         value: 'line',
-        preview: '/static/image/theme/line/preview@2x.png'
+        backgroundImage: 'static/image/bg/line-squashed.jpg',
+        preview: 'static/image/theme/line/preview@2x.png'
       },
       {
         name: '流星',
         value: 'star',
-        preview: '/static/image/theme/star/preview@2x.png'
+        backgroundImage: 'static/image/bg/star-squashed.jpg',
+        preview: 'static/image/theme/star/preview@2x.png'
       },
       {
         name: 'Tomorrow Night Blue (vsCode)',
         value: 'tomorrow-night-blue',
-        preview: '/static/image/theme/tomorrow-night-blue/preview@2x.png'
+        preview: 'static/image/theme/tomorrow-night-blue/preview@2x.png'
       }
     ],
-    name: ''
+    name: '',
+    backGroundImage: ''
   },
   mutations: {
     // 从 cookie 加载主题
@@ -53,6 +56,11 @@ export default {
     },
     // 激活当前主题
     activeTheme (state) {
+      // 设置背景图片
+      const themeSetting = state.list.find(e => e.value === state.name)
+      if (themeSetting) {
+        state.backGroundImage = themeSetting.backgroundImage || ''
+      }
       document.body.className = `theme-${state.name}`
     }
   }