Parcourir la source

对照其他项目修复了乾坤的配置

ZGC4846 il y a 5 jours
Parent
commit
c9e28d2fba
9 fichiers modifiés avec 52 ajouts et 64 suppressions
  1. 2 2
      .env
  2. 1 0
      .env.development
  3. 15 9
      README.md
  4. 1 1
      public/index.html
  5. 1 1
      src/config/setting.js
  6. 7 5
      src/public-path.js
  7. 5 4
      src/router/index.js
  8. 1 1
      src/views/login/index.vue
  9. 19 41
      vue.config.js

+ 2 - 2
.env

@@ -1,7 +1,7 @@
 VUE_APP_NAME=hr PC
 VUE_APP_API_BASE_URL=/api
-VUE_APP_PUBLIC_PATH=/page-hr/
-VUE_APP_QIANKUN_ACTIVE_RULE=/page-hr/
+# 与 EOM(/eos)、WT(/wt) 一致:静态资源部署目录
+VUE_APP_PUBLIC_PATH=/hr
 VUE_APP_PORT=8091
 VUE_APP_MAP_KEY=006d995d433058322319fa797f2876f5
 VUE_APP_ELE_ADMIN_LICENSE=dk9mcwJyetRWQlxWRiojIqJWdzJCLi4Wa4MDNxojI0NWZlJiOiQWaiwCMsICOyRjTEZGWi42bpNnclZnI0nIxEjLxIiO0NW=

+ 1 - 0
.env.development

@@ -1,3 +1,4 @@
 VUE_APP_API_BASE_URL=/api
 VUE_APP_PORT=8091
+VUE_APP_PUBLIC_PATH=/hr
 # VUE_APP_PROXY_TARGET=http://192.168.1.251:18086

+ 15 - 9
README.md

@@ -1,8 +1,6 @@
 # hr PC
 
-Vue 2 + Vue CLI 的 qiankun 子应用基础骨架,参考 `D:\project\vue_project\mes` 的接入方式整理。
-
-已接入 Element UI、EleAdmin、Vue I18n、Vuex 持久化、Axios、Day.js、NProgress 和剪贴板等基础能力。EleAdmin 的动态主题、国际化、地图 key、授权码及响应数据字段配置均已初始化。
+Vue 2 + Vue CLI 的 qiankun 子应用,乾坤接入方式对齐 `kd-aiot-frontend-eom` / `kd-aiot-frontend-wt`。
 
 ## 运行
 
@@ -11,20 +9,28 @@ npm install
 npm run dev
 ```
 
-默认独立访问地址:`http://localhost:8091/page-hr/`。
+默认独立访问地址:`http://localhost:8091/hr/`。
+
+## 路径约定(对照 EOM)
+
+| 项 | EOM | HR |
+|---|---|---|
+| `publicPath`(静态资源目录 / entry) | `/eos` | `/hr` |
+| 独立运行 router `base` | `/eos/` | `/hr/` |
+| 乾坤 router `base` / activeRule | `/page-eos/` | `/page-hr/` |
 
 ## qiankun 注册信息
 
-主应用可添加如下配置:
+主应用配置:
 
 ```js
 {
   name: 'page-hr',
-  entry: '/page-hr/',
-  activeRule: '/page-hr'
+  entry: '/hr/',       // 静态资源与 index.html 所在目录(同 EOM 的 /eos/)
+  activeRule: '/page-hr' // 浏览器路由前缀(同 EOM 的 /page-eos)
 }
 ```
 
-开发联调时 `entry` 可改为 `http://localhost:8091/page-hr/`。
+开发联调时 `entry` 可改为 `http://localhost:8091/hr/`。
 
-应用名称、端口、独立运行路径和 qiankun 路由前缀均可在 `.env` 中调整
+**重要**:构建产物需部署到网关的 `/hr/` 目录,不要部署到 `/page-hr/`

+ 1 - 1
public/index.html

@@ -8,7 +8,7 @@
   </head>
   <body>
     <noscript>
-      <strong>请启用 JavaScript 后继续使用 <%= process.env.VUE_APP_NAME %>。</strong>
+      <strong>当前环境未执行脚本,无法加载 <%= process.env.VUE_APP_NAME %>。</strong>
     </noscript>
     <div id="app"></div>
   </body>

+ 1 - 1
src/config/setting.js

@@ -3,7 +3,7 @@ import { DEFAULT_MENUS } from './menus';
 /** 接口基础地址 */
 export const API_BASE_URL = process.env.VUE_APP_API_BASE_URL;
 
-/** 应用及系统标识(与门户 activeRule `/page-hr` 对齐) */
+/** 应用及系统标识(与门户 activeRule `/page-hr`、资源目录 `/hr` 对齐,同 EOM 的 eos) */
 export const PROJECT_NAME = process.env.VUE_APP_NAME || 'HR';
 export const SYSTEM_NAME = 'hr';
 

+ 7 - 5
src/public-path.js

@@ -1,5 +1,7 @@
-if (window.__POWERED_BY_QIANKUN__) {
-  // qiankun 在运行时注入子应用静态资源地址。
-  // eslint-disable-next-line no-undef, camelcase
-  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
-}
+(function () {
+  if (window.__POWERED_BY_QIANKUN__) {
+    // 与 EOM/WT 一致:使用乾坤注入的 entry 公共路径(应对 entry=/hr/)
+    // eslint-disable-next-line no-undef, camelcase
+    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
+  }
+})();

+ 5 - 4
src/router/index.js

@@ -17,12 +17,13 @@ import { rewriteLegacyHrMenus } from '@/utils/menu-rewrite';
 
 Vue.use(VueRouter);
 
-const appBase = `/page-${SYSTEM_NAME}/`;
-
+// 与 EOM/WT 一致:
+// - 乾坤嵌入:base = /page-{SYSTEM_NAME}/(对应主应用 activeRule)
+// - 独立运行:base = /{SYSTEM_NAME}/(对应 publicPath /hr)
 const routerOptions = {
   base: window.__POWERED_BY_QIANKUN__
-    ? appBase
-    : process.env.VUE_APP_PUBLIC_PATH || appBase,
+    ? `/page-${SYSTEM_NAME}/`
+    : `/${SYSTEM_NAME}/`,
   routes,
   mode: 'history',
   scrollBehavior() {

+ 1 - 1
src/views/login/index.vue

@@ -117,7 +117,7 @@
         return HOME_PATH || '/home';
       },
       goAfterLogin(path) {
-        const base = String(this.$router.options.base || '/page-hr/').replace(
+        const base = String(this.$router.options.base || '/hr/').replace(
           /\/$/,
           '',
         );

+ 19 - 41
vue.config.js

@@ -7,7 +7,8 @@ function resolve(dir) {
   return path.join(__dirname, dir);
 }
 
-const publicPath = process.env.VUE_APP_PUBLIC_PATH || "/page-hr/";
+// 与 EOM(/eos)、WT(/wt) 一致:静态资源部署在短路径 /hr,乾坤路由前缀才是 /page-hr
+const publicPath = process.env.VUE_APP_PUBLIC_PATH || "/hr";
 
 // element-ui / ele-admin 仍使用 Sass @import,静音 Dart Sass 弃用警告
 const sassOptions = {
@@ -34,12 +35,12 @@ module.exports = {
       maxEntrypointSize: 2000000,
     },
     output: {
-      // qiankun 子应用:打包成 umd,并避免全局对象在严格模式下异常
-      library: `${name}-[name]`,
-      libraryTarget: "umd",
+      // 与 EOM/WT 一致:子应用打包成 umd 库格式
+      library: {
+        type: "umd",
+        name: `${name}`,
+      },
       chunkLoadingGlobal: `webpackJsonp_${name}`,
-      globalObject: "window",
-      uniqueName: name,
     },
     // Vue2 + vue-style-loader:样式靠副作用注入,不导出 default;
     // Webpack5 会对 `import style0 from ...` 报 missing export,可安全忽略
@@ -52,23 +53,29 @@ module.exports = {
   },
 
   devServer: {
-    open: [publicPath],
+    open: [publicPath.endsWith("/") ? publicPath : `${publicPath}/`],
     historyApiFallback: {
-      index: path.posix.join(publicPath, "index.html"),
+      index: path.posix.join(
+        publicPath.endsWith("/") ? publicPath : `${publicPath}/`,
+        "index.html",
+      ),
     },
     setupMiddlewares(middlewares) {
       middlewares.unshift({
         name: "redirect-to-app",
         middleware(req, res, next) {
           const url = (req.url || "").split("?")[0];
+          const appIndex = publicPath.endsWith("/")
+            ? publicPath
+            : `${publicPath}/`;
           if (
             url === "/" ||
-            url === "/hr" ||
-            url === "/hr/" ||
+            url === "/page-hr" ||
+            url === "/page-hr/" ||
             url === "/hr-pc" ||
             url === "/hr-pc/"
           ) {
-            res.redirect(publicPath);
+            res.redirect(appIndex);
             return;
           }
           next();
@@ -76,53 +83,26 @@ module.exports = {
       });
       return middlewares;
     },
-    // 代理跨域的配置
     proxy: {
-      // 当我们的本地的请求 有/api的时候,就会代理我们的请求地址向另外一个服务器发出请求
       "/api": {
-        // target: 'http://192.168.1.3:18086',
-        // target: 'http://192.168.1.158:18086',
-        // target: 'http://192.168.1.176:18086',
-        // target: "http://192.168.1.125:18086",
-        // target: 'http://192.168.1.251:51005',
-        // target: 'http://192.168.1.251:18186',
-        // target: 'http://192.168.1.251:18086', // 服务器
-        // target: 'http://192.168.1.251:18186',
-        // target: 'http://192.168.1.3:18086',
-        // target: 'http://192.168.1.251:18186', // 测试环境
-        // target: 'http://192.168.1.251:18087',
-        // target: 'http://192.168.1.116:18086',
-        // target: 'http://192.168.1.125:18086',
-        // target: 'http://192.168.1.11:18086', // 开发
-        // target: 'http://192.168.1.116:18086', // 赵沙金
-        // target: 'http://aiot.zoomwin.com.cn:51001/api',
-        // target: 'http://f222326r53.imwork.net',
-        // target: 'http://aiot.zoomwin.com.cn:51005/api',
         target: "http://192.168.1.147:18086",
-        changeOrigin: true, // 只有这个值为true的情况下 才表示开启跨域
+        changeOrigin: true,
         pathRewrite: {
           "^/api": "",
         },
       },
-      // kkFileView 在线预览(与 WT 一致,本地才能打开 /kkfile/onlinePreview)
       "/kkfile": {
         target: "http://aiot.zoomwin.com.cn:51001",
         changeOrigin: true,
         pathRewrite: { "^/kkfile": "/kkfile" },
       },
     },
-
     headers: {
       "Access-Control-Allow-Origin": "*",
     },
   },
   chainWebpack(config) {
     config.plugins.delete("prefetch");
-    // qiankun:入口 js 需落在 body,避免 head+defer 导致生命周期读取失败
-    config.plugin("html").tap((args) => {
-      args[0].inject = "body";
-      return args;
-    });
     config.module.rule("svg").exclude.add(resolve("src/icons")).end();
     config.module
       .rule("icons")
@@ -137,7 +117,6 @@ module.exports = {
       .end();
 
     if (process.env.NODE_ENV !== "development") {
-      // gzip 压缩
       config.plugin("compressionPlugin").use(
         new CompressionWebpackPlugin({
           test: /\.(js|css|html)$/,
@@ -148,7 +127,6 @@ module.exports = {
   },
   css: {
     loaderOptions: {
-      // 与 vue-style-loader 的 CommonJS 约定对齐
       css: {
         esModule: false,
       },