From 7b7013bc8d642f01b026b73bffa9e107b3edaeef Mon Sep 17 00:00:00 2001
From: jinglv <jing.lv@emqx.io>
Date: Fri, 30 Sep 2022 19:44:22 +0800
Subject: [PATCH] feat(bc-qiankun) add qiankun in emqx-dashboard as subapp

---
 .eslintrc.js                                  |  22 ++-
 package.json                                  |   3 +
 script/config.json                            |  12 ++
 src/common/forToBeSubApp.js                   |   4 +
 src/common/http.js                            |  64 +++++--
 src/common/utils.js                           |  13 ++
 src/components/Breadcrumb.vue                 |  22 ++-
 src/components/Layout.vue                     |   7 +-
 src/components/LeftBar.vue                    |  35 +++-
 src/components/NavHeader.vue                  |   9 +-
 src/i18n/Modules.js                           |   8 +-
 src/main.js                                   | 171 +++++++++++++++++-
 src/public-path.js                            |   4 +
 src/stores/index.js                           |  34 +++-
 src/views/Base/Login.vue                      |   4 +-
 src/views/Clients/ClientDetails.vue           |   6 +-
 src/views/Clients/Clients.vue                 |   2 +-
 src/views/Modules/ModuleDetail.vue            |   4 +-
 src/views/Modules/Modules.vue                 |   7 +-
 src/views/Modules/SelectModules.vue           |   2 +-
 .../components/Lwm2mProtocol/LwClients.vue    |   2 +-
 .../components/SlowQuery/SlowQuery.vue        |   2 +-
 src/views/Overview/Overview.vue               |  18 +-
 .../Overview/components/NodeBasicCard.vue     |   4 +-
 .../Overview/components/PercentageCards.vue   |   2 +-
 .../Overview/components/PolylineCards.vue     |   4 +-
 src/views/Plugins/Plugins.vue                 |  16 +-
 src/views/RuleEngine/ResourceView.vue         |   6 +-
 src/views/RuleEngine/Resources.vue            |   3 +-
 src/views/RuleEngine/RuleCreate.vue           |   9 +-
 src/views/RuleEngine/RuleView.vue             |   2 +-
 src/views/RuleEngine/Rules.vue                |  10 +-
 src/views/Schemas/Schemas.vue                 |  36 ++--
 src/views/Schemas/SchemasDetails.vue          |   9 +-
 src/views/Settings/ClusterSettings.vue        |   2 +-
 vue.config.js                                 |  30 +++
 yarn.lock                                     |  14 +-
 37 files changed, 492 insertions(+), 110 deletions(-)
 create mode 100644 src/common/forToBeSubApp.js
 create mode 100755 src/public-path.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 07e6a372..2fb0f04f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,20 +1,18 @@
+const path = require('path')
+
 module.exports = {
   root: true,
   env: {
     node: true,
   },
-  extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
-    '@vue/prettier',
-  ],
+  extends: ['plugin:vue/essential', '@vue/airbnb', '@vue/prettier', 'plugin:vue/base'],
   rules: {
     'prettier/prettier': 'error',
     'no-console': 'off',
     'no-debugger': 'off',
     'import/extensions': 0,
     'vue/max-attributes-per-line': [
-      4,
+      2,
       {
         singleline: 6,
         multiline: {
@@ -39,4 +37,16 @@ module.exports = {
   parserOptions: {
     parser: 'babel-eslint',
   },
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [['@', path.resolve(__dirname, 'src')]],
+        extensions: ['.js', '.jsx'],
+      },
+      node: {
+        paths: ['src'],
+        extensions: ['.js', '.ts', '.d.ts', '.tsx'],
+      },
+    },
+  },
 }
diff --git a/package.json b/package.json
index eebf489e..690dd38c 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,9 @@
   "scripts": {
     "dev-cloud": "export VUE_APP_BUILD_ENV=cloud && yarn serve",
     "serve": "vue-cli-service serve",
+    "serve:sub-app": "VUE_APP_BUILD_ENV=sub-app && vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build:sub-app": "VUE_SUB_APP_BUILD_ENV=sub-app vue-cli-service build",
     "build:config": "node ./script/build.config.js",
     "lint": "vue-cli-service lint",
     "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\" \"src/**/*.scss\""
@@ -20,6 +22,7 @@
     "dateformat": "^3.0.3",
     "echarts": "^4.2.1",
     "element-ui": "^2.9.1",
+    "eslint-import-resolver-alias": "^1.1.2",
     "highlight.js": "^9.15.8",
     "js-sql-parser": "^1.3.0",
     "jsonwebtoken": "^8.5.1",
diff --git a/script/config.json b/script/config.json
index 8a3ff3ce..a50061ca 100644
--- a/script/config.json
+++ b/script/config.json
@@ -34,5 +34,17 @@
         "rules.schema"
       ]
     }
+  },
+  "sub-app": {
+    "baseURL": "/api/v4",
+    "httpTimeout": 15000,
+    "useRelativeResourcePath": true,
+    "publicPath": "/",
+    "hide": {
+      "routes": [
+        "usersAcl"
+      ],
+      "children": ["monitor.license"]
+    }
   }
 }
\ No newline at end of file
diff --git a/src/common/forToBeSubApp.js b/src/common/forToBeSubApp.js
new file mode 100644
index 00000000..cc94d786
--- /dev/null
+++ b/src/common/forToBeSubApp.js
@@ -0,0 +1,4 @@
+export const SING_NODE_VALUE = 'single-node'
+export const isSingNode = (node) => node === SING_NODE_VALUE
+
+export const isSubApp = window.__POWERED_BY_QIANKUN__
diff --git a/src/common/http.js b/src/common/http.js
index f98b2337..2033f10b 100644
--- a/src/common/http.js
+++ b/src/common/http.js
@@ -7,6 +7,7 @@ import 'nprogress/nprogress.css'
 import { getBasicAuthInfo, toLogin } from '@/common/utils'
 import store from '@/stores'
 import router from '@/routes'
+import { isSubApp } from '../common/forToBeSubApp.js'
 
 let timer = 0
 
@@ -33,6 +34,7 @@ const httpCode = {
     115: '主题错误',
     '-1': '需要登录',
     '-2': '相关插件未开启',
+    '-3': 'dashbard 没有权限',
   },
   en: {
     0: 'Success',
@@ -53,6 +55,7 @@ const httpCode = {
     115: 'Bad topic',
     '-1': 'Login Required',
     '-2': 'Plugin not started',
+    '-3': 'dashbard not allowed',
   },
 }
 
@@ -60,30 +63,49 @@ const httpMap = httpCode[lang]
 
 const pluginPages = ['schemas', 'rules', 'resources', 'setting']
 
-Object.assign(axios.defaults, {
-  headers: {
-    'Content-Type': 'application/json',
-    'Cache-Control': 'no-cache',
-  },
-  baseURL: store.getters.httpBaseUrl,
-  timeout: store.state.httpTimeout,
-  auth: {},
-})
+if (!isSubApp) {
+  Object.assign(axios.defaults, {
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': 'no-cache',
+    },
+    baseURL: store.getters.httpBaseUrl,
+    timeout: store.state.httpTimeout,
+    auth: {},
+  })
+} else {
+  Object.assign(axios.defaults, {
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': 'no-cache',
+    },
+    baseURL: '',
+    timeout: store.state.httpTimeout,
+  })
+}
 
 axios.interceptors.request.use(
   (config) => {
+    if (store.state.isSubAppDestroyed) {
+      // console.log('是否退出=========')
+      throw new axios.Cancel('cancel')
+    }
     const user = getBasicAuthInfo()
     config.params = config.params || {}
+    // 如果是 subapp
     const {
       params: { _t: tokenRequired = true },
     } = config
-    if (!user.username && tokenRequired) {
+    if (isSubApp) {
+      // do nothing
+    } else if (!user.username && tokenRequired) {
       toLogin()
       throw new Error(httpMap['-1'])
     }
-    config.auth.username = user.username
-    config.auth.password = user.password
-
+    if (!isSubApp) {
+      config.auth.username = user.username
+      config.auth.password = user.password
+    }
     store.dispatch('LOADING', true)
     // lwm2m observe
     if (!config.url.includes('?msgType=observe&path=')) {
@@ -111,6 +133,7 @@ function handleError(error) {
       config: {
         params: { _m: showMessage = true },
       },
+      headers: {},
     },
   } = error
   if (selfError) {
@@ -120,7 +143,18 @@ function handleError(error) {
   }
   const { name: currentPage, fullPath } = router.history.current
   if (status === 401) {
-    toLogin()
+    if (!isSubApp) {
+      toLogin()
+    } else {
+      for (let i = 0; i <= timer; i++) {
+        clearTimeout(i)
+      }
+      Message.closeAll()
+      Message.error(httpMap['-3'])
+      if (window.orgId && window.projectId && window.deployId) {
+        router.push({ path: `/deploy/${window.orgId}/${window.projectId}/${window.deployId}/overview` })
+      }
+    }
   } else if (status === 404 && pluginPages.includes(currentPage)) {
     Message.error(httpMap['-2'])
   } else if (showMessage) {
@@ -149,6 +183,7 @@ axios.interceptors.response.use((response) => {
   let error = ''
   let selfError = ''
   if (typeof res === 'object') {
+    console.log(res, 'res')
     const { status } = response
     const { code = -100, meta, message } = response.data
     let { data } = response.data
@@ -162,7 +197,6 @@ axios.interceptors.response.use((response) => {
     }
     res = { data, status }
   }
-
   clearTimeout(timer)
   timer = setTimeout(() => {
     store.dispatch('LOADING', false)
diff --git a/src/common/utils.js b/src/common/utils.js
index 23267b0b..fb5ca90a 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -11,9 +11,22 @@ import { omit, cloneDeep, isObject } from 'lodash'
 
 import { enDocsLink, zhDocsLink, pluginsZh, pluginsEn } from '@/common/link_urls'
 
+import { isSubApp } from './forToBeSubApp.js'
+
 const locale = store.state.lang
 const VueI18n = lang[locale]
 
+const isSubAppIn = isSubApp
+//qiankun 处理路由
+export function getPathForEmqxDashBoardPage(routePath, path) {
+  if (isSubAppIn) {
+    const pathPre = routePath.split('/').splice(0, 8).join('/')
+    return `${pathPre}${path}`
+  } else {
+    return path
+  }
+}
+
 /**
  * 获取基础的验证信息
  * @param null
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index 396cabbd..7b1d3131 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -18,7 +18,7 @@
         </a-breadcrumb-item>
       </template>
       <a-breadcrumb-item v-else>
-        <router-link to="/" tag="span" class="btn btn-default raw">
+        <router-link :to="{ name: 'monitor' }" tag="span" class="btn btn-default raw">
           {{ $t('components.monitor') }}
         </router-link>
       </a-breadcrumb-item>
@@ -27,6 +27,9 @@
 </template>
 
 <script>
+import { isSubApp } from '../common/forToBeSubApp.js'
+import { getPathForEmqxDashBoardPage } from '../common/utils.js'
+
 export default {
   name: 'Breadcrumb',
 
@@ -48,28 +51,31 @@ export default {
   created() {
     this.getBreadcrumb()
   },
-
   methods: {
     getBreadcrumb() {
       const { path, query, name: routeName } = this.$route
       const pathList = path.split('/')
-      const name = pathList[1]
-      const oper = query.oper || pathList[2]
-
-      this.isIndex = path === '/monitor'
+      const name = isSubApp ? pathList[8] : pathList[1]
+      const oper = query.oper || (isSubApp ? pathList[9] : pathList[2])
+      if (isSubApp) {
+        const subAppPre = `/${path.split('/')[8]}`
+        this.isIndex = subAppPre === '/monitor'
+      } else {
+        this.isIndex = path === '/monitor'
+      }
       this.oper = ''
       this.backPath = undefined
       this.currentTitle = this.$t(`components.${name}`)
 
       if (['create', 'view', 'detail', 'add', 'select', 'manage'].includes(oper)) {
         this.oper = this.$t(`Base.${oper}`)
-        this.backPath = `/${name}`
+        this.backPath = getPathForEmqxDashBoardPage(path, `/${name}`)
       } else if (oper === 'node') {
         this.currentTitle = this.$t('Overview.nodeData')
       }
       if (routeName === 'pluginsName' && this.$route.params.pluginName) {
         this.oper = this.$route.params.pluginName
-        this.backPath = `/${name}`
+        this.backPath = getPathForEmqxDashBoardPage(path, `/${name}`)
       }
     },
   },
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index ae6b2224..88554942 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -10,7 +10,7 @@
         <nav-header></nav-header>
       </el-header>
 
-      <div :style="{ minHeight: '360px', minWidth: '600px', overflowX: 'hidden' }">
+      <div class="layout-container">
         <transition name="fade-transform" mode="out-in">
           <keep-alive>
             <router-view v-if="$route.meta.keepAlive"></router-view>
@@ -162,6 +162,11 @@ export default {
 .el-main {
   transition: margin-left 0.3s;
 }
+.layout-container {
+  min-height: 360px;
+  min-width: 600px;
+  overflow-x: hidden;
+}
 </style>
 <style lang="scss">
 .default-pwd-tip {
diff --git a/src/components/LeftBar.vue b/src/components/LeftBar.vue
index e1e0b2d7..2f2ded2b 100644
--- a/src/components/LeftBar.vue
+++ b/src/components/LeftBar.vue
@@ -44,6 +44,7 @@
 <script>
 import { Menu } from 'ant-design-vue'
 import 'ant-design-vue/lib/menu/style'
+import { isSubApp } from '../common/forToBeSubApp.js'
 
 export default {
   name: 'LeftBar',
@@ -71,7 +72,13 @@ export default {
     },
     defaultSelectedKeys() {
       const { path } = this.$route
-      return [`/${path.split('/')[1]}`]
+      return isSubApp
+        ? [
+            `/${path.split('/')[1]}/${path.split('/')[2]}/${path.split('/')[3]}/${path.split('/')[4]}/${
+              path.split('/')[5]
+            }/${path.split('/')[6]}/${path.split('/')[7]}/${path.split('/')[8]}`,
+          ]
+        : [`/${path.split('/')[1]}`]
     },
     logoStyle() {
       return { left: !this.$store.state.leftBarCollapse ? 0 : '-200px' }
@@ -92,33 +99,41 @@ export default {
   },
 
   created() {
+    // 需要qiankun
+    // 拿到前缀
+    const { path } = this.$route
     this.menus = [
       {
         title: this.$t('components.monitor'),
         path: '/monitor',
         key: 'monitor',
         icon: 'icon-yibiaopan',
+        name: 'monitor',
       },
       {
         title: this.$t('components.usersAcl'),
         path: '/users_and_acl',
         key: 'usersAcl',
         icon: 'icon-kongjian',
+        name: 'users_and_acl',
       },
       {
         title: this.$t('components.clients'),
         path: '/clients',
         icon: 'icon-guanlianshebei',
+        name: 'clients',
       },
       {
         title: this.$t('components.topics'),
         path: '/topics',
         icon: 'icon-zuzhiqunzu',
+        name: 'topics',
       },
       {
         title: this.$t('components.subscriptions'),
         path: '/subscriptions',
         icon: 'icon-shebeiguanli',
+        name: 'subscriptions',
       },
       {
         title: this.$t('components.rules'),
@@ -130,18 +145,21 @@ export default {
             key: 'rules.ruleEngine',
             path: '/rules',
             parentKey: 'rules',
+            name: 'rules',
           },
           {
             title: this.$t('components.resources'),
             key: 'rules.resources',
             path: '/resources',
             parentKey: 'rules',
+            name: 'resources',
           },
           {
             title: this.$t('components.schemas'),
             key: 'rules.schema',
             path: '/schemas',
             parentKey: 'rules',
+            name: 'schemas',
           },
         ],
       },
@@ -150,12 +168,14 @@ export default {
         key: 'modules',
         path: '/modules',
         icon: 'icon-changjingguanli',
+        name: 'modules',
       },
       {
         title: this.$t('components.alerts'),
         key: 'alerts',
         path: '/alerts',
         icon: 'icon-gaojing',
+        name: 'alerts',
       },
       {
         title: this.$t('components.tool'),
@@ -167,6 +187,7 @@ export default {
             key: 'tool.WebSocket',
             path: '/websocket',
             parentKey: 'tools',
+            name: 'websocket',
           },
         ],
       },
@@ -221,6 +242,18 @@ export default {
         ],
       },
     ]
+    if (path.startsWith('/emqxDashBoard')) {
+      // 代表是subapp
+      const subAppPre = path.split('/').splice(0, 8).join('/')
+      this.menus.forEach((item) => {
+        item.path = subAppPre + item.path
+        if (item.children && item.children.length > 0) {
+          item.children.forEach((children) => {
+            children.path = subAppPre + children.path
+          })
+        }
+      })
+    }
     this.initRouter()
   },
 
diff --git a/src/components/NavHeader.vue b/src/components/NavHeader.vue
index 9f979423..e68bf3eb 100644
--- a/src/components/NavHeader.vue
+++ b/src/components/NavHeader.vue
@@ -18,7 +18,7 @@
         <div class="alert-info func-item">
           <a-badge :count="alertCount">
             <router-link
-              to="/alerts/list"
+              :to="{ name: 'alerts' }"
               tag="i"
               class="iconfont icon-Notificationlisttongzhiliebiao"
               @click="clearAlert"
@@ -61,6 +61,7 @@
 <script>
 import Breadcrumb from './Breadcrumb.vue'
 import { loadAlarm } from '@/api/common'
+import { isSubApp } from '@/common/forToBeSubApp'
 
 export default {
   name: 'NavHeader',
@@ -83,7 +84,7 @@ export default {
       return { left: !this.$store.state.leftBarCollapse ? '201px' : '80px' }
     },
     username() {
-      return this.$store.state.user.username || this.$t('components.notLoggedIn')
+      return isSubApp ? '' : this.$store.state.user.username || this.$t('components.notLoggedIn')
     },
     alertText() {
       return this.alertCount > 0
@@ -126,7 +127,7 @@ export default {
       this.$store.dispatch('UPDATE_USER_INFO', { logOut: true })
       setTimeout(() => {
         this.$message.success(this.$t('components.loggedOut'))
-        this.$router.push('/login')
+        this.$router.push({ name: 'login' })
       }, 300)
     },
     toggleLeftNarCollapse() {
@@ -138,7 +139,7 @@ export default {
         return
       }
       if (command !== 'login') {
-        this.$router.push({ path: `/${command}` })
+        this.$router.push({ name: command })
         return
       }
       this.$msgbox
diff --git a/src/i18n/Modules.js b/src/i18n/Modules.js
index 94815162..418a7579 100644
--- a/src/i18n/Modules.js
+++ b/src/i18n/Modules.js
@@ -258,9 +258,13 @@ export default {
     en: 'Allowed',
   },
   useModulesTip: {
-    zh: 'EMQX 提供了丰富的模块用于替换插件，建议您前往使用 <a href="/#/modules">模块</a>。',
+    zh: 'EMQX 提供了丰富的模块用于替换插件，建议您前往使用 ',
     en: `EMQX provides a wealth of Modules to replace Plugin,
-    it is recommended that you go to use <a href="/#/modules">Modules</a>.`,
+    it is recommended that you go to use `,
+  },
+  modulesTip: {
+    zh: '模块。',
+    en: 'Modules.',
   },
   searchClient: {
     zh: '请输入 IMEI',
diff --git a/src/main.js b/src/main.js
index 53734893..da25b1bd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,16 +1,23 @@
+import './public-path'
 import Vue from 'vue'
+import Router from 'vue-router'
 import 'babel-polyfill'
 import ElementUI from 'element-ui'
 import Waves from 'vue-directive-waves'
 import VueI18n from 'vue-i18n'
 import ElementLocale from 'element-ui/lib/locale'
+import axios from '@/common/http'
+
 import lang from './i18n'
 
 import installer from '@/common/installer'
 import directive from '@/common/directive'
 import App from './App.vue'
+import routes from './routes/router'
 import router from './routes'
 import store from './stores'
+// for subapp
+import { isSubApp } from './common/forToBeSubApp.js'
 
 import '@/assets/style/common.scss'
 import '@/assets/style/element-reset.scss'
@@ -23,6 +30,7 @@ Vue.use(installer)
 Vue.use(ElementUI)
 Vue.use(Waves)
 Vue.use(directive)
+Vue.use(Router)
 
 const i18n = new VueI18n({
   locale: store.state.lang,
@@ -31,9 +39,160 @@ const i18n = new VueI18n({
 
 ElementLocale.i18n((key, value) => i18n.t(key, value))
 
-new Vue({
-  router,
-  store,
-  i18n,
-  render: (h) => h(App),
-}).$mount('#app')
+// 解决报错
+const originalPush = Router.prototype.push
+// push
+Router.prototype.push = function push(location, onResolve, onReject) {
+  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+  return originalPush.call(this, location).catch((err) => err)
+}
+
+let instance = null
+let routerForConfig = router
+const containerID = '#app'
+let appContainer = containerID
+
+const render = () => {
+  instance = new Vue({
+    store,
+    i18n,
+    router: routerForConfig,
+    render: (h) => h(App),
+  }).$mount(appContainer)
+}
+
+if (!isSubApp) {
+  render()
+}
+function renderSub(props = {}) {
+  const { container: containerCustom, lang: langsub, orgId, projectId, deployId, version, deployType, token } = props
+  window.orgId = orgId
+  window.projectId = projectId
+  window.deployId = deployId
+  if (isSubApp) {
+    // 处理path
+    const preUrl = `/emqxDashBoard/${version}/deploy/${orgId}/${projectId}/${deployId}/${deployType}`
+    // 1: 同一个集群，二次进入会出现白屏，所以用 item.path.startsWith('/emqxDashBoard/v4.4.0/deploy/') 条件判断
+    // 2： 先进入集群1  在进入集群2 1 的条件，导致 id 没被换掉
+    routes.forEach((item) => {
+      if (!item.path.startsWith('/emqxDashBoard')) {
+        item.path = preUrl + item.path
+        if (item.redirect) {
+          item.redirect = preUrl + item.redirect
+        }
+        if (item.children && item.children.length > 0) {
+          item.children.forEach((children) => {
+            if (children.path !== '') {
+              children.path = children.path.startsWith('/')
+                ? `${preUrl}${children.path}`
+                : `${item.path}/${children.path}`
+            } else {
+              children.path = item.path
+            }
+          })
+        }
+      } else if (item.path.startsWith('/emqxDashBoard')) {
+        const itemPath = item.path.split('/')
+        // 替换版本
+        itemPath[2] = version
+        // 替换deployId
+        itemPath[4] = orgId
+        itemPath[5] = projectId
+        itemPath[6] = deployId
+        itemPath[7] = deployType
+        item.path = itemPath.join('/')
+        if (item.redirect) {
+          const itemRedirect = item.redirect.split('/')
+          itemRedirect[2] = version
+          itemRedirect[4] = orgId
+          itemRedirect[5] = projectId
+          itemRedirect[6] = deployId
+          itemRedirect[7] = deployType
+          item.redirect = itemRedirect.join('/')
+        }
+        if (item.children && item.children.length > 0) {
+          item.children.forEach((children) => {
+            if (children.path !== '') {
+              const childrenPath = children.path.split('/')
+              childrenPath[2] = version
+              childrenPath[4] = orgId
+              childrenPath[5] = projectId
+              childrenPath[6] = deployId
+              childrenPath[7] = deployType
+              children.path = childrenPath.join('/')
+            } else {
+              children.path = item.path
+            }
+          })
+        }
+      }
+    })
+    // console.log(routes)
+    routerForConfig = new Router({
+      base: '/',
+      mode: 'hash',
+      scrollBehavior(to, from, savedPosition) {
+        if (to.path.endsWith('/modules/detail') || (to.meta.keepAlive && savedPosition)) {
+          return savedPosition
+        }
+        return { x: 0, y: 0 }
+      },
+      routes,
+    })
+    // eslint-disable-next-line consistent-return
+    routerForConfig.beforeEach((to, from, next) => {
+      if (window.__POWERED_BY_QIANKUN__) {
+        next()
+      }
+    })
+  }
+  if (containerCustom) {
+    appContainer = containerCustom.querySelector(containerID)
+  }
+  if (langsub) {
+    i18n.locale = langsub
+    store.commit('SET_LANGUAGE', langsub)
+  }
+  Object.assign(axios.defaults, {
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': 'no-cache',
+      Authorization:
+        `Bearer ${token}` || `Bearer ${JSON.parse(window.localStorage.getItem('ACCESS-TOKEN'), null, 2).value}`,
+    },
+    baseURL: store.getters.httpBaseUrl,
+    timeout: store.state.httpTimeout,
+  })
+  axios.interceptors.request.use(
+    (config) => {
+      config.params = config.params || {}
+      if (config.baseURL.startsWith('/api/emqxee/dashboard')) {
+        // do nothing
+      } else {
+        config.baseURL = `/api/emqxee/dashboard/${deployId}/${store.getters.httpBaseUrl}`
+      }
+      return config
+    },
+    (error) => Promise.reject(error),
+  )
+  render()
+}
+
+export async function bootstrap() {
+  // console.log('[vue] vue app bootstraped')
+}
+
+export async function mount(props) {
+  // console.log('[vue] props from main framework', props)
+  store.commit('SET_SUB_APP_DESTROYED', false)
+  renderSub(props)
+}
+
+export async function unmount() {
+  console.log('is unmount======')
+  instance.$destroy()
+  instance.$el.innerHTML = ''
+  instance = null
+  routerForConfig = null
+  store.commit('SET_SUB_APP_DESTROYED', true)
+}
diff --git a/src/public-path.js b/src/public-path.js
new file mode 100755
index 00000000..dc46d413
--- /dev/null
+++ b/src/public-path.js
@@ -0,0 +1,4 @@
+if (window.__POWERED_BY_QIANKUN__) {
+  // eslint-disable-next-line no-undef
+  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
+}
diff --git a/src/stores/index.js b/src/stores/index.js
index 504b15cc..276bcb55 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -3,10 +3,12 @@ import Vuex from 'vuex'
 
 import config from '../../script/config'
 import { loadLicenseInfo } from '@/api/overview'
+import { isSubApp } from '../common/forToBeSubApp.js'
 
 Vue.use(Vuex)
 
 const BASE_ENV = 'base'
+const SUBAPP_ENV = 'sub-app'
 
 function checkLanguage(lang) {
   if (['en', 'zh'].includes(lang)) {
@@ -21,9 +23,14 @@ function getDefaultLanguage() {
   return localStorageLanguage || defaultLanguage || browserLanguage || 'en'
 }
 function getConfigState() {
-  const buildEnv = process.env.VUE_APP_BUILD_ENV || BASE_ENV
-  const envConfig = config[buildEnv] || config.base
-
+  // const buildEnv = process.env.VUE_APP_BUILD_ENV || BASE_ENV
+  // const envConfig = config[buildEnv] || config.base
+  // return {
+  //   ...config.base,
+  //   ...envConfig,
+  // }
+  const buildEnv = !isSubApp ? process.env.VUE_APP_BUILD_ENV || BASE_ENV : process.env.VUE_APP_BUILD_ENV || SUBAPP_ENV
+  const envConfig = config[buildEnv] || (!isSubApp ? config.base : config['sub-app'])
   return {
     ...config.base,
     ...envConfig,
@@ -41,6 +48,10 @@ const EVALUATION_LICENSE_CONNECTION_LIMIT = 10
 
 export default new Vuex.Store({
   state: {
+    isSubApp,
+    isSubAppDestroyed: false,
+    deployId: localStorage.getItem('DEPLOYID'),
+    subAppVersion: localStorage.getItem('SUBAPPVERSION'),
     loading: false,
     user: JSON.parse(localStorage.user || sessionStorage.user || '{}') || {},
     lang: getDefaultLanguage(),
@@ -110,6 +121,14 @@ export default new Vuex.Store({
     LOADING({ commit }, loading = false) {
       commit('LOADING', loading)
     },
+    UPDATE_DEPLOYED({ commit }, deployId) {
+      localStorage.setItem('DEPLOYID', deployId)
+      commit('SET_DEPLOY_ID', deployId)
+    },
+    UPDATE_SUBAPPVERSION({ commit }, subAppVersion) {
+      localStorage.setItem('SUBAPPVERSION', subAppVersion)
+      commit('SET_SUBAPPVERSION', subAppVersion)
+    },
     async GET_LICENSE({ commit }) {
       try {
         commit('SET_LICENSE_LOADING_STATUS', true)
@@ -123,6 +142,12 @@ export default new Vuex.Store({
     },
   },
   mutations: {
+    SET_DEPLOY_ID(state, deployId) {
+      state.deployId = deployId
+    },
+    SET_SUBAPPVERSION(state, subAppVersion) {
+      state.subAppVersion = subAppVersion
+    },
     UPDATE_MODULE(state, selectedModule) {
       state.selectedModule = selectedModule
     },
@@ -148,6 +173,9 @@ export default new Vuex.Store({
     SET_LANGUAGE(state, lang) {
       state.lang = lang
     },
+    SET_SUB_APP_DESTROYED(state, payload) {
+      state.isSubAppDestroyed = payload
+    },
     SET_LICENSE(state, licenseData) {
       state.license = licenseData
     },
diff --git a/src/views/Base/Login.vue b/src/views/Base/Login.vue
index bdb31cb7..20faf95f 100644
--- a/src/views/Base/Login.vue
+++ b/src/views/Base/Login.vue
@@ -114,9 +114,9 @@ export default {
             return
           }
           setTimeout(() => {
-            const { to = this.fromCloud ? '/users_and_acl' : '/' } = this.$route.query
+            const { to = this.fromCloud ? 'users_and_acl' : 'monitor' } = this.$route.query
             this.$router.replace({
-              path: to,
+              name: to,
             })
             if (!this.isNeedAuth) {
               this.fullLoading.close()
diff --git a/src/views/Clients/ClientDetails.vue b/src/views/Clients/ClientDetails.vue
index d6604ea3..207f47d5 100644
--- a/src/views/Clients/ClientDetails.vue
+++ b/src/views/Clients/ClientDetails.vue
@@ -48,8 +48,8 @@
                         <span class="field-value">{{ record.proto_name }} {{ mqttVersionMap[record.proto_ver] }}</span>
                       </template>
                       <template v-else>
-                        <span class="field-value"
-                          >{{ record.proto_name }}
+                        <span class="field-value">
+                          {{ record.proto_name }}
                           <span v-if="record.proto_ver"> v{{ record.proto_ver }}</span>
                         </span>
                       </template>
@@ -391,7 +391,7 @@ export default {
           this.$set(this.record, 'connected', false)
           this.$message.success(successMsg)
           setTimeout(() => {
-            this.$router.push({ path: '/clients' })
+            this.$router.push({ name: 'clients' })
           }, 500)
         })
         .catch(() => {})
diff --git a/src/views/Clients/Clients.vue b/src/views/Clients/Clients.vue
index f13793be..77d81428 100644
--- a/src/views/Clients/Clients.vue
+++ b/src/views/Clients/Clients.vue
@@ -101,7 +101,7 @@
             <template slot-scope="{ row }">
               <router-link
                 :to="{
-                  path: '/clients/detail',
+                  name: 'clients-view',
                   query: { clientid: row.clientid },
                 }"
                 class="keep-spaces"
diff --git a/src/views/Modules/ModuleDetail.vue b/src/views/Modules/ModuleDetail.vue
index 042e8315..1e14ee5f 100644
--- a/src/views/Modules/ModuleDetail.vue
+++ b/src/views/Modules/ModuleDetail.vue
@@ -538,9 +538,9 @@ export default {
       // this.cleanForm()
       setTimeout(() => {
         if (this.from === 'modules' || !isCancel) {
-          this.$router.push('/modules')
+          this.$router.push({ name: 'modules' })
         } else {
-          this.$router.push(`/modules/select?id=${this.$route.query.id}&top=${this.$route.query.top}`)
+          this.$router.push({ name: 'modules-select', query: { id: this.$route.query.id, top: this.$route.query.top } })
         }
       }, 10)
     },
diff --git a/src/views/Modules/Modules.vue b/src/views/Modules/Modules.vue
index d8408d74..689bf798 100644
--- a/src/views/Modules/Modules.vue
+++ b/src/views/Modules/Modules.vue
@@ -6,7 +6,7 @@
           <div class="content-left">
             {{ $t('Modules.modules') }}
             <span v-cloak class="modules-num">{{ moduleCount }}</span>
-            <el-button class="confirm-btn" type="primary" size="small" @click="$router.push('/modules/select')">
+            <el-button class="confirm-btn" type="primary" size="small" @click="addModule">
               {{ $t('Modules.moduleAdd') }}
             </el-button>
           </div>
@@ -103,6 +103,9 @@ export default {
   },
 
   methods: {
+    addModule() {
+      this.$router.push({ name: 'modules-select' })
+    },
     manageModule(item) {
       if (this.canManageModuleTypes.indexOf(item.type) === -1) {
         return
@@ -168,7 +171,7 @@ export default {
       this.selectedModule.from = 'modules'
       this.selectedModule.oper = 'edit'
       this.$store.dispatch('UPDATE_MODULE', this.selectedModule)
-      this.$router.push('/modules/detail')
+      this.$router.push({ name: 'module-detail' })
     },
     async loadData() {
       this.searchVal = ''
diff --git a/src/views/Modules/SelectModules.vue b/src/views/Modules/SelectModules.vue
index 462e256e..72e9a070 100644
--- a/src/views/Modules/SelectModules.vue
+++ b/src/views/Modules/SelectModules.vue
@@ -262,7 +262,7 @@ export default {
           })
           .catch()
       }
-      this.$router.push(`/modules/detail?id=${this.activeNavId}&top=${this.scrollTop}`)
+      this.$router.push({ name: 'module-detail', query: { id: this.activeNavId, top: this.scrollTop } })
     },
     async getAddedModuleInfo(id) {
       const data = await showCreatedModuleInfo(id)
diff --git a/src/views/Modules/components/Lwm2mProtocol/LwClients.vue b/src/views/Modules/components/Lwm2mProtocol/LwClients.vue
index f2881b2d..f7a516da 100644
--- a/src/views/Modules/components/Lwm2mProtocol/LwClients.vue
+++ b/src/views/Modules/components/Lwm2mProtocol/LwClients.vue
@@ -108,7 +108,7 @@ export default {
     showClientDetails(row) {
       const { imei } = row
       this.$router.push({
-        path: '/modules/detail',
+        name: 'module-detail',
         query: {
           type: 'lwm2m',
           imei,
diff --git a/src/views/Modules/components/SlowQuery/SlowQuery.vue b/src/views/Modules/components/SlowQuery/SlowQuery.vue
index 5093d4d1..e6fb1f43 100644
--- a/src/views/Modules/components/SlowQuery/SlowQuery.vue
+++ b/src/views/Modules/components/SlowQuery/SlowQuery.vue
@@ -12,7 +12,7 @@
             <template slot-scope="{ row }">
               <router-link
                 :to="{
-                  path: '/clients/detail',
+                  name: 'clients-view',
                   query: { clientid: row.clientid },
                 }"
               >
diff --git a/src/views/Overview/Overview.vue b/src/views/Overview/Overview.vue
index 7248ca15..0b373a4f 100644
--- a/src/views/Overview/Overview.vue
+++ b/src/views/Overview/Overview.vue
@@ -236,6 +236,7 @@ export default {
         uptime: '',
         version: '',
       },
+      timerData: 0,
       timer: 0,
       nodes: [],
       isNodesLoading: false,
@@ -299,13 +300,19 @@ export default {
 
   async created() {
     this.pageLoading = true
-    await Promise.all([this.loadData(), this.dataTypeChange()])
-    this.pageLoading = false
     this.startPolling()
+    try {
+      await Promise.all([this.loadData(), this.dataTypeChange()])
+    } catch (error) {
+      //
+    } finally {
+      this.pageLoading = false
+    }
   },
 
   beforeDestroy() {
     clearInterval(this.timerData)
+    clearInterval(this.timer)
   },
 
   methods: {
@@ -314,7 +321,7 @@ export default {
       this.timerData = setInterval(() => {
         this.loadData()
         this.loadNodes()
-        this.$refs.percentageCards.loadMetricsData()
+        if (this.$refs.percentageCards) this.$refs.percentageCards.loadMetricsData()
       }, 10 * 1000)
     },
     async dataTypeChange() {
@@ -322,7 +329,7 @@ export default {
         await this.loadNodes()
         return Promise.resolve()
       } catch (error) {
-        return Promise.resolve()
+        return Promise.reject()
       }
     },
     async loadNodes() {
@@ -356,8 +363,7 @@ export default {
         this.setCurrentMetricsLogsRealtime(state)
         return Promise.resolve()
       } catch (error) {
-        console.error(error)
-        return Promise.resolve()
+        return Promise.reject()
       } finally {
         this.isCurrentMetricsLoading = false
       }
diff --git a/src/views/Overview/components/NodeBasicCard.vue b/src/views/Overview/components/NodeBasicCard.vue
index 2461f007..01d326af 100644
--- a/src/views/Overview/components/NodeBasicCard.vue
+++ b/src/views/Overview/components/NodeBasicCard.vue
@@ -108,7 +108,7 @@
 </template>
 
 <script>
-import { formatNumberSize } from '@/common/utils'
+import { formatNumberSize } from '@/common/utils.js'
 
 export default {
   name: 'NodeBasicCard',
@@ -196,7 +196,7 @@ export default {
   methods: {
     toDetails() {
       this.$router.push({
-        path: '/monitor/node',
+        name: 'node',
         query: {
           name: this.record.node,
         },
diff --git a/src/views/Overview/components/PercentageCards.vue b/src/views/Overview/components/PercentageCards.vue
index 6280f74a..33d860fc 100644
--- a/src/views/Overview/components/PercentageCards.vue
+++ b/src/views/Overview/components/PercentageCards.vue
@@ -81,7 +81,7 @@ export default {
         this.isLoading = false
       } catch (error) {
         this.isLoading = false
-        console.error(error)
+        // console.error(error)
       }
     },
 
diff --git a/src/views/Overview/components/PolylineCards.vue b/src/views/Overview/components/PolylineCards.vue
index 42cdaec6..b5d3faf5 100644
--- a/src/views/Overview/components/PolylineCards.vue
+++ b/src/views/Overview/components/PolylineCards.vue
@@ -96,6 +96,7 @@ export default {
 
   created() {
     this.loadMetricsLogData()
+    this.timerMetrics = setInterval(this.setMetricsChartRealTime, 60000)
   },
 
   beforeDestroy() {
@@ -127,12 +128,11 @@ export default {
               })
               return Promise.resolve()
             } catch (error) {
-              return Promise.resolve()
+              return Promise.reject()
             }
           }),
         )
         this.isLoading = false
-        this.timerMetrics = setInterval(this.setMetricsChartRealTime, 60000)
       } catch (e) {
         console.error(e)
         this.isLoading = false
diff --git a/src/views/Plugins/Plugins.vue b/src/views/Plugins/Plugins.vue
index 701f7317..3c6bd066 100644
--- a/src/views/Plugins/Plugins.vue
+++ b/src/views/Plugins/Plugins.vue
@@ -170,8 +170,9 @@
         <span>{{ $t('Base.tips') }}</span>
       </div>
       <div class="tip-content">
-        <p v-html="$t('Modules.useModulesTip')">
-          {{ $t('Modules.useModulesTip') }}
+        <p>
+          <span>{{ $t('Modules.useModulesTip') }}</span>
+          <a @click="toModules">{{ $t('Modules.modulesTip') }}</a>
         </p>
       </div>
       <div class="tip-checkbox">
@@ -280,12 +281,18 @@ export default {
       const { name } = item
       const node = this.nodeName
       this.$router.push({
-        path: `/plugins/${name}`,
+        name: 'pluginsName',
+        params: { pluginName: name },
         query: {
           node,
         },
       })
     },
+    toModules() {
+      this.$router.push({
+        name: 'modules',
+      })
+    },
     typeFilterHandler(value, row) {
       return value === row.type
     },
@@ -368,7 +375,8 @@ export default {
     },
     handleManage(row) {
       this.$router.push({
-        path: `/plugins/${row.name}`,
+        name: 'pluginsName',
+        params: { pluginName: row.name },
       })
     },
   },
diff --git a/src/views/RuleEngine/ResourceView.vue b/src/views/RuleEngine/ResourceView.vue
index b23e9d13..c1b78822 100644
--- a/src/views/RuleEngine/ResourceView.vue
+++ b/src/views/RuleEngine/ResourceView.vue
@@ -88,8 +88,8 @@
 
 <script>
 import { loadResourceDetails, reconnectResource, destroyResource } from '@/api/rules'
-import ResourceNode from './components/ResourceNode'
-import ResourceField from './components/ResourceField'
+import ResourceNode from './components/ResourceNode.vue'
+import ResourceField from './components/ResourceField.vue'
 
 export default {
   name: 'ResourceView',
@@ -145,7 +145,7 @@ export default {
           await destroyResource(this.record.id)
           this.$message.success(this.$t('Base.deleteSuccess'))
           setTimeout(() => {
-            this.$router.push({ path: '/resources' })
+            this.$router.push({ name: 'resources' })
           }, 500)
         })
         .catch(() => {})
diff --git a/src/views/RuleEngine/Resources.vue b/src/views/RuleEngine/Resources.vue
index 88c81a77..0a7f8bac 100644
--- a/src/views/RuleEngine/Resources.vue
+++ b/src/views/RuleEngine/Resources.vue
@@ -185,7 +185,8 @@ export default {
     },
     showResource(row) {
       this.$router.push({
-        path: `/resources/${row.id}`,
+        name: 'resources-view',
+        params: { id: row.id },
         query: { oper: 'view' },
       })
     },
diff --git a/src/views/RuleEngine/RuleCreate.vue b/src/views/RuleEngine/RuleCreate.vue
index 7ff0a56a..1b2a6ace 100644
--- a/src/views/RuleEngine/RuleCreate.vue
+++ b/src/views/RuleEngine/RuleCreate.vue
@@ -136,7 +136,7 @@
       class="button-group__center rule-create-operation"
       :style="{ width: $store.state.leftBarCollapse ? ' calc(100% - 80px)' : ' calc(100% - 200px)' }"
     >
-      <el-button type="default" size="medium" @click="$router.push({ path: '/rules' })">
+      <el-button type="default" size="medium" @click="toRules">
         {{ $t('Base.cancel') }}
       </el-button>
       <el-button type="primary" size="medium" @click="save">
@@ -255,6 +255,9 @@ export default {
         ruleAction.initData()
       }
     },
+    toRules() {
+      this.$router.push({ name: 'rules' })
+    },
     triggerEventChange(sql) {
       const events = [
         'events/message_delivered',
@@ -364,14 +367,14 @@ export default {
         updateRule(this.currentRule, data).then(() => {
           this.$message.success(this.$t('Base.editSuccess'))
           setTimeout(() => {
-            this.$router.push({ path: '/rules' })
+            this.$router.push({ name: 'rules' })
           }, 600)
         })
       } else {
         createRule(data).then(() => {
           this.$message.success(this.$t('Base.createSuccess'))
           setTimeout(() => {
-            this.$router.push({ path: '/rules' })
+            this.$router.push({ name: 'rules' })
           }, 600)
         })
       }
diff --git a/src/views/RuleEngine/RuleView.vue b/src/views/RuleEngine/RuleView.vue
index dda739c7..eb4c51e5 100644
--- a/src/views/RuleEngine/RuleView.vue
+++ b/src/views/RuleEngine/RuleView.vue
@@ -280,7 +280,7 @@ export default {
           await destroyRule(this.record.id)
           this.$message.success(this.$t('Base.deleteSuccess'))
           setTimeout(() => {
-            this.$router.push({ path: '/rules' })
+            this.$router.push({ name: 'rules' })
           }, 500)
         })
         .catch(() => {})
diff --git a/src/views/RuleEngine/Rules.vue b/src/views/RuleEngine/Rules.vue
index 5b5b8d8f..d90e11a1 100644
--- a/src/views/RuleEngine/Rules.vue
+++ b/src/views/RuleEngine/Rules.vue
@@ -105,7 +105,7 @@
         </a-card>
         <a-card class="emq-list-card" :loading="listLoading">
           <div class="emq-table-header">
-            <el-button type="primary" size="small" icon="el-icon-plus" @click="$router.push('/rules/create')">
+            <el-button type="primary" size="small" icon="el-icon-plus" @click="createRules">
               {{ $t('Base.create') }}
             </el-button>
           </div>
@@ -116,7 +116,8 @@
               <template slot-scope="{ row }">
                 <router-link
                   :to="{
-                    path: `/rules/${row.id}`,
+                    name: 'rules-view',
+                  params: row.id,
                     query: { oper: 'view' },
                   }"
                   >{{ row.id }}</router-link
@@ -449,6 +450,9 @@ export default {
   },
 
   methods: {
+    createRules() {
+      this.$router.push({ name: 'rules-create' })
+    },
     deleteRule(row) {
       this.$msgbox
         .confirm(this.$t('RuleEngine.deleteRuleConfirm'), {
@@ -575,7 +579,7 @@ export default {
         })
     },
     editRule(row) {
-      this.$router.push(`/rules/create?rule=${row.id}`)
+      this.$router.push({ name: 'rules-create', query: { rule: row.id } })
     },
     copyRule({ id }) {
       this.$router.push({ name: 'rules-create', query: { command: 'copy', rule: id } })
diff --git a/src/views/Schemas/Schemas.vue b/src/views/Schemas/Schemas.vue
index 8af563ff..d61873f4 100644
--- a/src/views/Schemas/Schemas.vue
+++ b/src/views/Schemas/Schemas.vue
@@ -19,17 +19,7 @@
     <div class="app-wrapper">
       <a-card class="emq-list-card">
         <div class="emq-table-header">
-          <el-button
-            type="primary"
-            size="small"
-            icon="el-icon-plus"
-            @click="
-              $router.push({
-                path: '/schemas/0',
-                query: { oper: 'create' },
-              })
-            "
-          >
+          <el-button type="primary" size="small" icon="el-icon-plus" @click="baseCreateSchemas">
             {{ $t('Base.create') }}
           </el-button>
         </div>
@@ -37,15 +27,7 @@
         <el-table :data="tableData" class="data-list">
           <el-table-column prop="name" :label="$t('Schemas.name')">
             <template slot-scope="{ row }">
-              <a
-                href="javascript:;"
-                @click="
-                  $router.push({
-                    path: `/schemas/${row.name}`,
-                    query: { oper: 'view' },
-                  })
-                "
-              >
+              <a href="javascript:;" @click="createShcemasName(row)">
                 {{ row.name }}
               </a>
             </template>
@@ -98,6 +80,20 @@ export default {
   },
 
   methods: {
+    baseCreateSchemas() {
+      this.$router.push({
+        name: 'schemas-details',
+        params: { id: '0' },
+        query: { oper: 'create' },
+      })
+    },
+    createShcemasName(row) {
+      this.$router.push({
+        name: 'schemas-details',
+        params: { id: row.name },
+        query: { oper: 'view' },
+      })
+    },
     async loadData() {
       const res = await loadSchemas()
       if (res) {
diff --git a/src/views/Schemas/SchemasDetails.vue b/src/views/Schemas/SchemasDetails.vue
index ce0e0399..6c15808a 100644
--- a/src/views/Schemas/SchemasDetails.vue
+++ b/src/views/Schemas/SchemasDetails.vue
@@ -173,7 +173,7 @@
           <el-button :loading="saveLoading" type="primary" size="medium" @click="save">
             {{ $t('Base.create') }}
           </el-button>
-          <el-button type="default" size="medium" @click="$router.push({ path: '/schemas' })">
+          <el-button type="default" size="medium" @click="toSchemas">
             {{ $t('Base.cancel') }}
           </el-button>
         </div>
@@ -183,12 +183,12 @@
 </template>
 
 <script>
+import { setTimeout } from 'timers'
 import { loadResource } from '@/api/rules'
 import { createSchema, viewSchema, deleteSchema } from '@/api/schemas'
 import detailsPage from '@/mixins/detailsPage'
 import Monaco from '@/components/Monaco'
 import StretchHeight from '@/components/StretchHeight'
-import { setTimeout } from 'timers'
 
 export default {
   name: 'SchemasDetails',
@@ -252,9 +252,12 @@ export default {
   },
 
   methods: {
+    toSchemas() {
+      this.$router.push({ name: 'schemas' })
+    },
     routeToSchemas() {
       setTimeout(() => {
-        this.$router.push({ path: '/schemas' })
+        this.$router.push({ name: 'schemas' })
       }, 500)
     },
 
diff --git a/src/views/Settings/ClusterSettings.vue b/src/views/Settings/ClusterSettings.vue
index 3171e248..e2a0d71c 100644
--- a/src/views/Settings/ClusterSettings.vue
+++ b/src/views/Settings/ClusterSettings.vue
@@ -235,7 +235,7 @@ export default {
     },
     toNodeDetails(name) {
       this.$router.push({
-        path: '/monitor/node',
+        name: 'node',
         query: {
           name,
         },
diff --git a/vue.config.js b/vue.config.js
index d05dde3a..a5e87417 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,9 +1,13 @@
+const path = require('path')
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 const mock = require('./script/mock.json')
 const config = require('./script/config.json')
 
 const { NODE_ENV, VUE_APP_BUILD_ENV = 'base' } = process.env
 
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
 const before = (app) => {
   // 开发环境下可以使用 mock 数据
   if (NODE_ENV === 'development' && mock) {
@@ -26,6 +30,10 @@ if (customConfig.useRelativeResourcePath && process.env.NODE_ENV === 'production
   process.env.VUE_APP_PUBLIC_PATH_FOR_ROUTER = publicPath
   publicPath = './'
 }
+const name = 'emqxDashBoard-bc'
+if (VUE_APP_BUILD_ENV === 'sub-app') {
+  publicPath = '/integration/emqx-dashboard/v4.4.0-bc/'
+}
 
 const getVersion = () => {
   const matched = process.env.npm_package_version.match(/^\d\.\d/)
@@ -52,6 +60,9 @@ module.exports = {
         },
       },
     },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
   },
   css: {
     loaderOptions: {
@@ -75,5 +86,24 @@ module.exports = {
         features: ['!gotoSymbol'],
       }),
     ],
+    output: {
+      // 把子应用打包成 umd 库格式
+      // 必须打包成一个库文件
+      library: `${name}-[name]`,
+      libraryTarget: 'umd',
+      jsonpFunction: `webpackJsonp_${name}`,
+    },
+    resolve: {
+      alias: {
+        '@': resolve('src'),
+      },
+      // 导入时想要省略的扩展名列表
+      // 不建议使用 .vue 影响IDE和类型支持
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
+    },
+  },
+  chainWebpack: (config) => {
+    config.module.rule('fonts').use('url-loader').loader('url-loader').options({}).end()
+    config.module.rule('images').use('url-loader').loader('url-loader').options({}).end()
   },
 }
diff --git a/yarn.lock b/yarn.lock
index a43c2146..bf55214d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3126,7 +3126,14 @@ debug@^3.1.0, debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0:
+debug@^4.0.1:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.1.0, debug@^4.1.1, debug@^4.2.0:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
@@ -3712,6 +3719,11 @@ eslint-config-prettier@^6.0.0, eslint-config-prettier@^6.11.0:
   dependencies:
     get-stdin "^6.0.0"
 
+eslint-import-resolver-alias@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-alias/-/eslint-import-resolver-alias-1.1.2.tgz#297062890e31e4d6651eb5eba9534e1f6e68fc97"
+  integrity sha512-WdviM1Eu834zsfjHtcGHtGfcu+F30Od3V7I9Fi57uhBEwPkjDcii7/yW8jAT+gOhn4P/vOxxNAXbFAKsrrc15w==
+
 eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"