fix:sub-admin

main/src/main.js

@@ -4,7 +4,7 @@ import App from './App.vue';
 import router from './router';
 import pinia from './store';
 import ElementPlus from 'element-plus';
-import 'element-plus/dist/index.css';
+// import 'element-plus/dist/index.css';
 import { registerGlobalMicroApps } from './micro';
 import { registerElIcons } from './plugins/icon';
 import './utils/permission';

main/src/micro/app.js

@@ -10,13 +10,13 @@ export const leftApps = [
   //   title: '运营服务',
   //   icon: 'images/platform/icon-home.png',
   // },
-  // {
-  //   name: 'sub-admin',
-  //   entry: VITE_APP_SUB_ADMIN,
-  //   activeRule: '/sub-admin/',
-  //   title: '管理后台',
-  //   icon: 'images/platform/icon-admin.png',
-  // },
+  {
+    name: 'sub-admin',
+    entry: VITE_APP_SUB_ADMIN,
+    activeRule: '/sub-admin/',
+    title: '管理后台',
+    icon: 'images/platform/icon-admin.png',
+  },
   // {
   //   name: 'sub-app',
   //   entry: VITE_APP_SUB_ADMIN,
@@ -64,7 +64,16 @@ export const rightApps = [
   // },
 ];
 
-export const microApps = [...leftApps, ...rightApps];
+export const defaultApps = [
+  // {
+  //   name: 'sub-admin',
+  //   entry: VITE_APP_SUB_ADMIN,
+  //   activeRule: '/sub-admin/',
+  //   title: '后台管理系统',
+  // },
+];
+
+export const microApps = [...defaultApps, ...leftApps, ...rightApps];
 
 const apps = microApps.map((item) => {
   return {

main/src/micro/index.js

@@ -25,7 +25,7 @@ const registerGlobalMicroApps = () => {
   });
 
   start({
-    prefetch: false,
+    prefetch: 'all',
     sandbox: { experimentalStyleIsolation: true },
   });
 

sub-admin/.env.development

@@ -1,7 +1,8 @@
 # 开发环境配置
 VUE_APP_TITLE = 后台管理系统
+VUE_APP_NAME = 'sub-amin'
 ENV = 'development'
 VUE_APP_PORT  = '9527'
-VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = '/apis'
 VUE_APP_BASE_URL = 'http://192.168.18.99:8080'
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

sub-admin/.eslintrc.js

@@ -1,4 +1,5 @@
 // ESlint 检查配置
+/* eslint-disable */
 module.exports = {
   root: true,
   parserOptions: {
@@ -61,7 +62,7 @@ module.exports = {
         properties: 'always',
       },
     ],
-    'comma-dangle': [2, 'allow-end'],
+    // 'comma-dangle': [2, 'never'],
     'comma-spacing': [
       2,
       {

sub-admin/src/layout/components/Navbar.vue

@@ -19,9 +19,9 @@
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
       </template>
 
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">

sub-admin/src/main.js

@@ -1,15 +1,14 @@
 import Vue from 'vue';
-
 import Cookies from 'js-cookie';
-
 import Element from 'element-ui';
-import './assets/styles/element-variables.scss';
 
-import '@/assets/styles/index.scss'; // global css
-import '@/assets/styles/ruoyi.scss'; // ruoyi css
 import App from './App';
 import store from './store';
 import router from './router';
+import './assets/styles/element-variables.scss';
+import '@/assets/styles/index.scss'; // global css
+import '@/assets/styles/ruoyi.scss'; // ruoyi css
+import 'element-ui/lib/theme-chalk/index.css';
 import directive from './directive'; // directive
 import plugins from './plugins'; // plugins
 import { download } from '@/utils/request';
@@ -37,6 +36,8 @@ import DictTag from '@/components/DictTag';
 import VueMeta from 'vue-meta';
 // 字典数据组件
 import DictData from '@/components/DictData';
+// import render from './plugins/micro';
+// export * from './plugins/micro';
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts;
@@ -78,28 +79,21 @@ Vue.use(Element, {
 
 Vue.config.productionTip = false;
 
-/**
- * qiankun子应用
- */
 let instance = null;
 
-function render() {
+export function render(props = {}) {
+  const { container } = props;
   instance = new Vue({
-    el: '#app',
     router,
     store,
     render: (h) => h(App),
-  });
-}
-
-if (!window.__POWERED_BY_QIANKUN__) {
-  render();
+  }).$mount(container ? container.querySelector('#app') : '#app');
 }
 
 export async function bootstrap() {}
 
 export async function mount(props) {
-  render();
+  render(props);
 }
 
 export async function unmount() {
@@ -107,3 +101,10 @@ export async function unmount() {
   instance.$el.innerHTML = '';
   instance = null;
 }
+
+if (window.__POWERED_BY_QIANKUN__) {
+  // eslint-disable-next-line no-undef
+  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
+} else {
+  render();
+}

sub-admin/src/router/index.js

@@ -62,12 +62,12 @@ export const constantRoutes = [
     hidden: true,
   },
   {
-    path: '',
+    path: '/',
     component: Layout,
-    redirect: 'index',
+    redirect: '/index',
     children: [
       {
-        path: 'index',
+        path: '/index',
         component: () => import('@/views/index'),
         name: 'Index',
         meta: { title: '首页', icon: 'dashboard', affix: true },
@@ -176,8 +176,10 @@ Router.prototype.replace = function push(location) {
   return routerReplace.call(this, location).catch((err) => err);
 };
 
+console.log(179, window.__POWERED_BY_QIANKUN__);
 export default new Router({
-  mode: 'history', // 去掉url中的#
+  base: window.__POWERED_BY_QIANKUN__ ? '/sub-admin/' : '/',
+  mode: 'history',
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes,
 });

sub-admin/vue.config.js

@@ -18,7 +18,7 @@ module.exports = {
   // 部署生产环境和开发环境下的URL。
   // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
   // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
+  publicPath: process.env.NODE_ENV === 'development' ? `/sub-admin/` : '/',
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
   outputDir: 'dist',
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
@@ -33,6 +33,7 @@ module.exports = {
     host: '0.0.0.0',
     port: port,
     open: true,
+    https: false,
     headers: {
       'Access-Control-Allow-Origin': '*',
     },
@@ -62,6 +63,12 @@ module.exports = {
         '@': resolve('src'),
       },
     },
+    output: {
+      // qiankun need
+      library: `${name}-[name]`,
+      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
+      jsonpFunction: `${name}`,
+    },
     plugins: [
       // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
       new CompressionPlugin({
@@ -92,6 +99,22 @@ module.exports = {
       })
       .end();
 
+    // fix:Solve the problem of accessing element-ui icon on the qiankun application
+    config.module
+      .rule('fonts')
+      .test(/\.(ttf|woff)(\?.*)?$/)
+      .use('url-loader')
+      .loader('url-loader')
+      .tap((options) => {
+        options = {
+          ...options,
+          limit: 99999999,
+          name: '[name].[hash:7].[ext]',
+        };
+        return options;
+      })
+      .end();
+
     config.when(process.env.NODE_ENV !== 'development', (config) => {
       config
         .plugin('ScriptExtHtmlWebpackPlugin')