Portal-Web

PIiPortal项目的运营管理后台部分, 基于Rancher extension、Vue2、Element-UI框架设计实现

本地开发使用

不支持windows系统，可以使用WSL2模拟linux开发环境，需要将代码clone到wsl文件系统目录

    # 克隆代码
    git clone https://git.piicloud.cn/portal/portal-web.git
    # 切换目录
    cd portal-web
    # 下载依赖
    yarn 
    # 拷贝.env.example文件为.env文件，修改API地址为rancher地址
    # 启动开发环境项目
    yarn dev

依赖更新注意事项

依赖更新后需要重新打包上传portal-web-builder容器镜像，需要在安装Docker的机器上执行以下命令

./deploy/builer.sh

打包builder报错：执行以下命令

ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts

如何通过打补丁的方式修改node_modules中依赖库的代码

1、在package.json中增加dev依赖patch-package，并执行yarn安装

  "devDependencies": {
    "patch-package": "^8.0.0"
  },

2、在package.json中增加script，patch-package会在yarn install后执行打补丁操作

  "scripts": {
    "postinstall": "patch-package"
    }

3、修改node_modules中的库文件，并执行以下命令，命令会在patches目录生成补丁文件

  npx patch-package @rancher/shell

patch记录:

1、减少不必要的路由拦截

diff --git a/node_modules/@rancher/shell/config/router/navigation-guards/index.js b/node_modules/@rancher/shell/config/router/navigation-guards/index.js
index 99d7daa..e97e612 100644
--- a/node_modules/@rancher/shell/config/router/navigation-guards/index.js
+++ b/node_modules/@rancher/shell/config/router/navigation-guards/index.js
@@ -17,7 +17,8 @@ export function installNavigationGuards(router, context) {
   // NOTE: the order of the installation matters.
   // Be intentional when adding, removing or modifying the guards that are installed.
 
-  const navigationGuardInstallers = [installLoadInitialSettings, installAttemptFirstLogin, installAuthentication, installProducts, installClusters, installRuntimeExtensionRoute, installI18N, installHandleInstallRedirect, installPageTitle, installRecordLastRoute, installServerUpgradeGrowl];
+  //const navigationGuardInstallers = [installLoadInitialSettings, installAttemptFirstLogin, installAuthentication, installProducts, installClusters, installRuntimeExtensionRoute, installI18N, installHandleInstallRedirect, installPageTitle, installRecordLastRoute, installServerUpgradeGrowl];
+  const navigationGuardInstallers = [installAuthentication, installClusters];
 
   navigationGuardInstallers.forEach((installer) => installer(router, context));
 }

2、正常使用路由嵌套，不修改的话没法自定义layout

diff --git a/node_modules/@rancher/shell/core/plugin.ts b/node_modules/@rancher/shell/core/plugin.ts
index b797e4e..afd33b0 100644
--- a/node_modules/@rancher/shell/core/plugin.ts
+++ b/node_modules/@rancher/shell/core/plugin.ts
@@ -151,9 +151,6 @@ export class Plugin implements IPlugin {
       if (typelessRoute.component?.layout) {
         console.warn(`Layouts have been deprecated. We still have parent routes which use the same name and styling as the previous layouts. \n\nFound a component ${ typelessRoute.component.name } with the '${ typelessRoute.component.layout }' layout specified `); // eslint-disable-line no-console
         parentOverride = typelessRoute.component.layout.toLowerCase();
-      } else {
-        console.warn(`Layouts have been deprecated. We still have parent routes which use the same name and styling as the previous layouts. You should specify a parent, we're currently setting the parent to 'default'`); // eslint-disable-line no-console
-        parentOverride = 'default';
       }
     }

3、引入element plus的按需引入，不需要声明组件

diff --git a/node_modules/@rancher/shell/vue.config.js b/node_modules/@rancher/shell/vue.config.js
index e99d05f..ec9ecf6 100644
--- a/node_modules/@rancher/shell/vue.config.js
+++ b/node_modules/@rancher/shell/vue.config.js
@@ -1,3 +1,5 @@
+const Components = require('unplugin-vue-components/webpack')
+const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
 const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
@@ -553,6 +555,11 @@ module.exports = function(dir, appConfig = {}) {
 
       config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /\/__tests__\// }));
 
+      config.plugins.push(Components({
+        resolvers: [ElementPlusResolver()],
+      }),);
+
+
       config.resolve.extensions.push(...['.tsx', '.ts', '.js', '.vue', '.scss']);
       config.watchOptions = {
         ...(config.watchOptions || {}),