chore: 控制台迁移

babel.config.js

 module.exports = {
   presets: ['@vue/cli-plugin-babel/preset'],
+  plugins: ['lodash'],
 }

config/account.config.js → config/dev.config.js

 module.exports = isProduction => {
   return {
-    name: 'account',
-    projectName: 'account 管理后台',
-    publicUrl: '/account',
     serverPort: 8010,
     qsArrayFormat: 'none',
-    mockPrefix: '/account-mock',
+    mockPrefix: '/mock',
     apiPrefix: '/root',
     timeout: 30000,
   }

config/prod.config.js

+module.exports = () => {
+  return {
+    serverPort: 8010,
+    qsArrayFormat: 'none',
+    mockPrefix: '/mock',
+    apiPrefix: '/root',
+    timeout: 30000,
+  }
+}

package.json

 {
-  "name": "nft",
+  "name": "bass3",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve-account": "vue-cli-service serve --mode account",
-    "build-account": "vue-cli-service build --mode account",
+    "serve": "vue-cli-service serve --mode dev",
+    "build": "vue-cli-service build --mode prod",
     "lint": "vue-cli-service lint",
     "tailwind": "npx tailwindcss -i src/assets/css/tailwind.css -o ./tailwind.css --watch",
     "prepare": "husky install"
@@ -47,12 +47,16 @@
     "@vue/eslint-config-typescript": "^7.0.0",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.3",
+    "babel-plugin-lodash": "^3.3.4",
     "compression-webpack-plugin": "^9.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.0.0",
     "husky": "^7.0.0",
+    "image-webpack-loader": "^8.0.1",
     "lint-staged": "^12.1.2",
+    "lodash-webpack-plugin": "^0.11.6",
+    "mini-css-extract-plugin": "^2.4.5",
     "minimist": "^1.2.5",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "postcss": "^8.4.5",
@@ -68,7 +72,8 @@
     "svgtofont": "^3.13.1",
     "typescript": "^4.5.4",
     "typescript-json-serializer": "^3.4.4",
-    "unplugin-vue-components": "^0.17.9"
+    "unplugin-vue-components": "^0.17.9",
+    "webpack-bundle-analyzer": "^4.5.0"
   },
   "engines": {
     "node": ">=14"

src/pages/account/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
-import { router } from '@shared/router'
+import { router } from './router'
 import { store } from '@shared/store'
 import { createMockServer } from '@shared/mock'
 import 'tailwindcss/tailwind.css'

src/shared/router/index.ts → src/pages/account/router/index.ts

 import { createRouter, createWebHistory } from 'vue-router'
-import { CROPPED_ROUTES, LOOKUP_ROUTES, FIXED_ROUTES, SYSTEM_ROUTES } from './constants'
-import { zookeeper } from './zookeeper'
-
+import { LOOKUP_ROUTES, FIXED_ROUTES, SYSTEM_ROUTES } from '@shared/router/constants'
+import { zookeeper } from '@shared/router/zookeeper'
+//配置路由
+export const formatRoute = arr => {
+  return arr.map(_ => {
+    const res = {
+      ..._,
+      children: formatRoute(_.children ?? []),
+    }
+    if (_.meta.element) {
+      res.component = () => import(`@account/views/cropped/${_.meta.element}`) || null
+    } else {
+      res.component = () => import(`@shared/layouts/pure-layout.vue`)
+    }
+    return res
+  })
+}
+export const CROPPED_ROUTES = formatRoute(require(`@account/json/routes.json`).children)
 const routes = [
   {
     path: '/',
@@ -13,7 +28,7 @@ const routes = [
   ...SYSTEM_ROUTES,
 ]
 export const router = createRouter({
-  history: createWebHistory(process.env.PUBLIC_URL),
+  history: createWebHistory('/account'),
   routes,
 })
 zookeeper(router)

src/pages/federation/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
-import { router } from '@shared/router'
+import { router } from './router'
 import { store } from '@shared/store'
 import { createMockServer } from '@shared/mock'
 import 'tailwindcss/tailwind.css'

src/pages/federation/router/index.ts

+import { createRouter, createWebHistory } from 'vue-router'
+import { LOOKUP_ROUTES, FIXED_ROUTES, SYSTEM_ROUTES } from '@shared/router/constants'
+import { zookeeper } from '@shared/router/zookeeper'
+//配置路由
+export const formatRoute = arr => {
+  return arr.map(_ => {
+    const res = {
+      ..._,
+      children: formatRoute(_.children ?? []),
+    }
+    if (_.meta.element) {
+      res.component = () => import(`@account/views/cropped/${_.meta.element}`) || null
+    } else {
+      res.component = () => import(`@shared/layouts/pure-layout.vue`)
+    }
+    return res
+  })
+}
+export const CROPPED_ROUTES = formatRoute(require(`@federation/json/routes.json`).children)
+
+const routes = [
+  {
+    path: '/',
+    name: 'default',
+    component: () => import('@shared/layouts/default-layout.vue'),
+    children: [...CROPPED_ROUTES, ...LOOKUP_ROUTES],
+  },
+  ...FIXED_ROUTES,
+  ...SYSTEM_ROUTES,
+]
+export const router = createRouter({
+  history: createWebHistory('/federation'),
+  routes,
+})
+zookeeper(router)

src/pages/orgnization/main.ts → src/pages/organization/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
-import { router } from '@shared/router'
+import { router } from './router'
 import { store } from '@shared/store'
 import { createMockServer } from '@shared/mock'
 import 'tailwindcss/tailwind.css'

src/pages/organization/router/index.ts

+import { createRouter, createWebHistory } from 'vue-router'
+import { LOOKUP_ROUTES, FIXED_ROUTES, SYSTEM_ROUTES } from '@shared/router/constants'
+import { zookeeper } from '@shared/router/zookeeper'
+//配置路由
+export const formatRoute = arr => {
+  return arr.map(_ => {
+    const res = {
+      ..._,
+      children: formatRoute(_.children ?? []),
+    }
+    if (_.meta.element) {
+      res.component = () => import(`@account/views/cropped/${_.meta.element}`) || null
+    } else {
+      res.component = () => import(`@shared/layouts/pure-layout.vue`)
+    }
+    return res
+  })
+}
+export const CROPPED_ROUTES = formatRoute(require(`@organization/json/routes.json`).children)
+
+const routes = [
+  {
+    path: '/',
+    name: 'default',
+    component: () => import('@shared/layouts/default-layout.vue'),
+    children: [...CROPPED_ROUTES, ...LOOKUP_ROUTES],
+  },
+  ...FIXED_ROUTES,
+  ...SYSTEM_ROUTES,
+]
+export const router = createRouter({
+  history: createWebHistory('/organization'),
+  routes,
+})
+zookeeper(router)

src/pages/super/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
-import { router } from '@shared/router'
+import { router } from './router'
 import { store } from '@shared/store'
 import { createMockServer } from '@shared/mock'
 import 'tailwindcss/tailwind.css'

src/pages/super/router/index.ts

+import { createRouter, createWebHistory } from 'vue-router'
+import { LOOKUP_ROUTES, FIXED_ROUTES, SYSTEM_ROUTES } from '@shared/router/constants'
+import { zookeeper } from '@shared/router/zookeeper'
+//配置路由
+export const formatRoute = arr => {
+  return arr.map(_ => {
+    const res = {
+      ..._,
+      children: formatRoute(_.children ?? []),
+    }
+    if (_.meta.element) {
+      res.component = () => import(`@account/views/cropped/${_.meta.element}`) || null
+    } else {
+      res.component = () => import(`@shared/layouts/pure-layout.vue`)
+    }
+    return res
+  })
+}
+export const CROPPED_ROUTES = formatRoute(require(`@super/json/routes.json`).children)
+
+const routes = [
+  {
+    path: '/',
+    name: 'default',
+    component: () => import('@shared/layouts/default-layout.vue'),
+    children: [...CROPPED_ROUTES, ...LOOKUP_ROUTES],
+  },
+  ...FIXED_ROUTES,
+  ...SYSTEM_ROUTES,
+]
+export const router = createRouter({
+  history: createWebHistory('/super'),
+  routes,
+})
+zookeeper(router)

src/pages/system/main.ts

 import { createApp } from 'vue'
 import App from './App.vue'
-import { router } from '@shared/router'
+import { router } from './router'
 import { store } from '@shared/store'
 import { createMockServer } from '@shared/mock'
 import 'tailwindcss/tailwind.css'

src/pages/system/router/index.ts

+import { createRouter, createWebHistory } from 'vue-router'
+import { LOOKUP_ROUTES, FIXED_ROUTES, SYSTEM_ROUTES } from '@shared/router/constants'
+import { zookeeper } from '@shared/router/zookeeper'
+
+//配置路由
+export const formatRoute = arr => {
+  return arr.map(_ => {
+    const res = {
+      ..._,
+      children: formatRoute(_.children ?? []),
+    }
+    if (_.meta.element) {
+      res.component = () => import(`@account/views/cropped/${_.meta.element}`) || null
+    } else {
+      res.component = () => import(`@shared/layouts/pure-layout.vue`)
+    }
+    return res
+  })
+}
+export const CROPPED_ROUTES = formatRoute(require(`@system/json/routes.json`).children)
+
+const routes = [
+  {
+    path: '/',
+    name: 'default',
+    component: () => import('@shared/layouts/default-layout.vue'),
+    children: [...CROPPED_ROUTES, ...LOOKUP_ROUTES],
+  },
+  ...FIXED_ROUTES,
+  ...SYSTEM_ROUTES,
+]
+export const router = createRouter({
+  history: createWebHistory('/system'),
+  routes,
+})
+zookeeper(router)

src/shared/router/constants.ts

-import { formatRoute } from './utils'
-//引入配置文件router.json
-const routerMenu = require(`@${process.env.NAME}/json/routes.json`).children
-//初始化
-export const CROPPED_ROUTES = formatRoute(routerMenu)
-
 export const FIXED_ROUTES = [
   {
     path: '/login',

src/shared/router/utils.ts

 //配置路由
-export const formatRoute = arr => {
+export const formatRoute = (name, arr) => {
   return arr.map(_ => {
     const res = {
       ..._,
-      children: formatRoute(_.children ?? []),
+      children: formatRoute(name, _.children ?? []),
     }
     if (_.meta.element) {
-      res.component = () => import(`@${process.env.NAME}/views/cropped/${_.meta.element}`) || null
+      res.component = () => import(`@${name}/views/cropped/${_.meta.element}`) || null
     } else {
       res.component = () => import(`@shared/layouts/pure-layout.vue`)
     }

tsconfig.json

@@ -26,7 +26,11 @@
       ],
       "@assets/*": ["src/assets/*"],
       "@shared/*": ["src/shared/*"],
-      "@account/*": ["src/account/*"]
+      "@account/*": ["src/account/*"],
+      "@federation/*": ["src/federation/*"],
+      "@organization/*": ["src/organization/*"],
+      "@super/*": ["src/super/*"],
+      "@system/*": ["src/system/*"],
     },
     "lib": [
       "esnext",

vue.config.js

@@ -3,6 +3,7 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const resolve = dir => path.join(__dirname, dir)
 const sign = process.argv[4]
 const productionGzip = true
+const webpackBundleAnalyzer = false
 const productionGzipExtensions = ['js', 'css']
 const Components = require('unplugin-vue-components/webpack')
 const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
@@ -10,9 +11,12 @@ const { EnvironmentPlugin, ProvidePlugin } = require('webpack')
 const { snakeCase, toUpper } = require('lodash')
 const { defineConfig } = require('@vue/cli-service')
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+const glob = require('glob')
+const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 console.log('sign:::', sign)
 const isProduction = process.env.NODE_ENV === 'production'
-const appConfig = require(`./config/${sign}.config.js`)(isProduction)
+const appConfig = require(`./config/${sign}.config.js`)
 require('svgtofont')({
   src: path.resolve(process.cwd(), 'src/assets/icons/svg'), // svg文件目录
   dist: path.resolve(process.cwd(), 'src/assets/font'), // 生成文件目录
@@ -25,23 +29,41 @@ require('svgtofont')({
   .catch(() => {
     console.log('生成字体失败')
   })
+const pages = {}
+// 配置pages多页面获取当前文件夹下的html和js
+glob.sync('./src/pages/*/*.ts').forEach(filepath => {
+  const fileList = filepath.split('/')
+  const fileName = fileList[fileList.length - 2]
+  pages[fileName] = {
+    entry: `src/pages/${fileName}/main.ts`,
+    // 模板来源
+    template: `src/pages/${fileName}/index.html`,
+    // 提取出来的通用 chunk 和 vendor chunk。
+    chunks: ['chunk-vendors', 'chunk-common', fileName],
+  }
+})
+console.log(pages)
 module.exports = defineConfig({
   lintOnSave: false,
   filenameHashing: true,
-  outputDir: 'dist-' + sign,
-  publicPath: `/${sign}/`,
+  // outputDir: 'dist-' + sign,
+  // publicPath: `/${sign}/`,
   productionSourceMap: !isProduction,
   transpileDependencies: true,
-  pages: {
-    [sign]: {
-      entry: `src/pages/${sign}/main.ts`,
-      template: `src/pages/${sign}/index.html`,
-      filename: 'index.html',
-      title: sign,
-      chunks: ['chunk-vendors', 'chunk-common', sign],
-    },
-  },
+  pages,
   chainWebpack: config => {
+    // 移除 prefetch 插件
+    config.plugins.delete('prefetch')
+    // 移除 preload 插件，避免加载多余的资源
+    config.plugins.delete('preload')
+
+    config.optimization.minimize(true)
+
+    config.optimization.splitChunks({
+      chunks: 'all',
+    })
+    webpackBundleAnalyzer &&
+      config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
     // 让其他svg loader不对src/assets/icons/svg进行操作
     config.module.rule('svg').exclude.add(resolve('src/assets/icons/svg')).end()
     // 使用svg-sprite-loader对src/assets/icons/svg下的svg进行操作
@@ -62,8 +84,60 @@ module.exports = defineConfig({
       .set('@assets', resolve('src/assets'))
       .set('@shared', resolve('src/shared'))
       .set('@account', resolve('src/pages/account'))
+      .set('@federation', resolve('src/pages/federation'))
+      .set('@organization', resolve('src/pages/organization'))
+      .set('@super', resolve('src/pages/super'))
+      .set('@system', resolve('src/pages/system'))
     config.plugins.delete('named-chunks')
     if (isProduction) {
+      config.plugin('extract-css').use(MiniCssExtractPlugin)
+      config.plugin('loadshReplace').use(new LodashModuleReplacementPlugin())
+
+      config.module
+        .rule('images')
+        .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
+        .use('image-webpack-loader')
+        .loader('image-webpack-loader')
+        .options({
+          bypassOnDebug: true,
+        })
+        .end()
+        .use('url-loader')
+        .loader('file-loader')
+        .options({
+          name: 'assets/[name].[hash:8].[ext]',
+        })
+        .end()
+      config.module
+        .rule('svg')
+        .test(/\.(svg)(\?.*)?$/)
+        .use('file-loader')
+        .loader('file-loader')
+        .options({
+          name: 'assets/[name].[hash:8].[ext]',
+        })
+      // 公共代码抽离
+      config.optimization = {
+        // 分割代码块
+        splitChunks: {
+          cacheGroups: {
+            //公用模块抽离
+            common: {
+              chunks: 'initial',
+              minSize: 0, //大于0个字节
+              minChunks: 2, //抽离公共代码时，这个代码块最小被引用的次数
+            },
+            //第三方库抽离
+            vendor: {
+              priority: 1, //权重
+              test: /node_modules/,
+              chunks: 'initial',
+              minSize: 0, //大于0个字节
+              minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数
+            },
+          },
+        },
+      }
       productionGzip &&
         new CompressionWebpackPlugin({
           test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),