页面路由重定向

2 months ago · bdea71ac31
10 changed files with 6232 additions and 11008 deletions
--- a/.env.admin
+++ b/.env.admin
@ -1 +1,2 @@
+NODE_ENV=development  
 VUE_APP_TYPE=admin
--- a/.env.client
+++ b/.env.client
@ -1 +1,2 @@
+NODE_ENV=development
 VUE_APP_TYPE=client
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,17 +2,19 @@
  "name": "newkuaile-vue-project2",
  "version": "0.1.0",
  "private": true,
- "scripts": {
+  "scripts": {
    "serve": "vue-cli-service serve",
-    "serve:client": "vue-cli-service serve --mode client",
-    "serve:admin": "vue-cli-service serve --mode admin",
-    "build:client": "vue-cli-service build --mode client",
-    "build:admin": "vue-cli-service build --mode admin"
+    "serve:client": "VUE_APP_TYPE=client vue-cli-service serve",
+    "serve:admin": "VUE_APP_TYPE=admin vue-cli-service serve",
+    "build:client": "VUE_APP_TYPE=client vue-cli-service build",
+    "build:admin": "VUE_APP_TYPE=admin vue-cli-service build",
+    "build:analyze": "VUE_APP_TYPE=admin vue-cli-service build --report"
  },
  "dependencies": {
    "axios": "^1.8.3",
    "core-js": "^3.40.0",
    "element-ui": "^2.15.14",
+    "file-loader": "^6.2.0",
    "lottie-web": "^5.12.2",
    "qrcode": "^1.5.4",
    "regenerator-runtime": "^0.14.1",
@ -37,8 +39,10 @@
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
-    "sass": "^1.32.7",
-    "sass-loader": "^12.0.0",
-    "vue-template-compiler": "^2.6.14"
+    "json-loader": "^0.5.7",
+    "sass": "^1.32.13",
+    "sass-loader": "^10.2.1",
+    "vue-template-compiler": "^2.6.14",
+    "webpack-bundle-analyzer": "^4.10.2"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -36,6 +36,8 @@ import Breadcrumb from './components/Breadcrumb.vue';
 import GlobalLoading from '@/components/GlobalLoading1.vue'
 import SliderScond from '@/components/SliderScond.vue'
 // import ContentWithLoading from '@/components/ContentWithLoading'
+
+const APP_TYPE = process.env.VUE_APP_TYPE
 export default {
  data() {
    return {
@ -55,6 +57,7 @@ export default {
    ...mapState(['showSidebar','showSecondSide','secondMenu','showHeader','showHeaderRight','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中
  },
  mounted() {
+    console.log(APP_TYPE,'APP_TYPE===888');
    window.addEventListener('beforeunload', this.clearStorage);
  },
  beforeUnmount() {
--- a/src/router/admin-routes
+++ b/src/router/admin-routes
@ -1,175 +0,0 @@
-[
-    {
-      "path": "/super/ranking",
-      "component": "views/super/Ranking/Ranking.vue",
-      "webpackChunkName": "Ranking",
-      "children": [
-        {
-          "path": "",
-          "redirect": "views/super/Ranking/RankDetail.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "总利润 - 年排行",
-            "rank_type": 1,
-            "type": "year",
-            "showDateSelect": false
-          }
-        },
-        {
-          "path": "yearProfit",
-          "name": "年排行",
-          "component": "views/super/Ranking/RankDetail.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "总利润 - 年排行",
-            "rank_type": 1,
-            "type": "year",
-            "showDateSelect": false
-          }
-        },
-        {
-          "path": "monthProfit",
-          "name": "月排行",
-          "component": "views/super/Ranking/RankDetail.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "总利润 - 月排行",
-            "rank_type": 1,
-            "type": "month",
-            "showDateSelect": true
-          }
-        },
-        {
-          "path": "checkProfit",
-          "name": "产品毛利润排行",
-          "component": "views/super/Ranking/RankBatchList.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "产品 - 毛利润排行",
-            "rank_type": 1,
-            "type": "check_type"
-          }
-        },
-        {
-          "path": "checkOrdernum",
-          "name": "产品订单数排行",
-          "component": "views/super/Ranking/RankBatchList.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "产品 - 订单数排行",
-            "rank_type": 2,
-            "type": "check_type"
-          }
-        },
-        {
-          "path": "checkRefund",
-          "name": "产品退单数排行",
-          "component": "views/super/Ranking/RankList.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "产品 - 退单数排行",
-            "rank_type": 3,
-            "type": "check_type"
-          }
-        },
-        {
-          "path": "loss",
-          "name": "产品负毛利排行",
-          "component": "views/super/Ranking/RankList.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "产品 - 负毛利排行",
-            "rank_type": 5,
-            "type": "loss"
-          }
-        },
-        {
-          "path": "agentProfit",
-          "name": "代理商毛利润排行",
-          "component": "views/super/Ranking/RankBatchList.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "代理商 - 毛利润排行",
-            "rank_type": 1,
-            "type": "agent"
-          }
-        },
-        {
-          "path": "agentRecharge",
-          "name": "代理商充值排行",
-          "component": "views/super/Ranking/RankBatchList.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "代理商 - 充值排行",
-            "rank_type": 4,
-            "type": "agent"
-          }
-        },
-        {
-          "path": "agentNew",
-          "name": "代理商新加盟",
-          "component": "views/super/Ranking/RankDetail.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "代理商 - 新加盟",
-            "type": "agentnew",
-            "showDateSelect": false
-          }
-        },
-        {
-          "path": "purchase",
-          "name": "采购价",
-          "component": "views/super/Ranking/Purchase.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "设置 - 采购价",
-            "type": "purchase"
-          }
-        },
-        {
-          "path": "stagePurchase",
-          "name": "阶段采购价",
-          "component": "views/super/Ranking/Purchase.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "设置 - 阶段采购",
-            "type": "stagePurchase"
-          }
-        },
-        {
-          "path": "detail",
-          "name": "详情",
-          "component": "views/super/Ranking/RankDetail.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "详情",
-            "type": "day",
-            "showDateSelect": false,
-            "lookMore": false
-          }
-        },
-        {
-          "path": "list",
-          "name": "列表",
-          "component": "views/super/Ranking/RankList.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "详情",
-            "showDateSelect": false,
-            "lookMore": false
-          }
-        },
-        {
-          "path": "order",
-          "name": "订单统计",
-          "component": "views/super/Ranking/RankDetail.vue",
-          "webpackChunkName": "Ranking",
-          "props": {
-            "pageTitle": "订单统计",
-            "type": "order",
-            "showDateSelect": false
-          }
-        }
-      ]
-    }
-  ]
--- a/src/router/client-routes.json
+++ b/src/router/client-routes.json
@ -2,7 +2,7 @@
    {
      "path": "/",
      "name": "首页",
-      "component": "views/HomeView.vue",
+      "component": "views/agent/home.vue",
      "isFirst": true,
      "meta": {
        "title": "首页",
@ -43,17 +43,6 @@
      }
    },
    {
-      "path": "/register",
-      "name": "register",
-      "isFirst": true,
-      "component": "views/Register.vue",
-      "webpackChunkName": "register",
-      "meta": {
-        "title": "注册页",
-        "hideBreadcrumb": true
-      }
-    },
-    {
      "path": "/ui",
      "name": "ui组件",
      "isFirst": true,
@ -241,19 +230,6 @@
        "breadcrumbParent": "收款方式"
      }
    },
-
-
-
-
-    {
-      "path": "/franchise",
-      "name": "加盟",
-      "component": "views/agent/Franchise.vue",
-      "webpackChunkName": "franchise",
-      "meta": {
-        "hideBreadcrumb": true
-      }
-    },
    {
      "path": "/configureServicePrices",
      "name": "配置服务价格",
@ -262,12 +238,5 @@
      "meta": {
        "hideBreadcrumb": true
      }
-    },
-  
-    {
-      "path": "/pageTemplete",
-      "name": "网页模板",
-      "component": "views/PageTemplete.vue",
-      "webpackChunkName": "pageTemplete"
    }
  ]
--- a/src/router/index.js
+++ b/src/router/index.js
@ -44,10 +44,23 @@ const router = new VueRouter({
 });
 router.beforeEach((to, from, next) => {
  // 根据启动 进行首页 重定向
-  if (to.path === '/') {
-    const redirectPath = process.env.VUE_APP_TYPE === 'client' ? '/' : '/super/ranking/yearProfit'
-    next(redirectPath)
+  // 只有在client模式下才重定向到首页
+  // 防止在client模式下访问admin路由
+  if (APP_TYPE === 'client' && to.path.startsWith('/super/')) {
+    // 如果是client模式但访问admin路由，重定向到首页
+    next('/');
+    // return;
  }
+  if (APP_TYPE === 'admin' && (to.path.startsWith('/agent/') || to.path == '/')) {
+    // 如果是admin模式但访问client路由，重定向到首页
+    next('/super/ranking/yearProfit');
+  }
+
+  // 如果已经是在目标页面，不需要重定向
+  if (from.path === to.path) {
+    next();
+  }
+
  // 有关路由跳转时，部分状态重置
  store.commit('SET_SECOND_MENU', []);
  if(store.state.componentsName){
@ -75,7 +88,7 @@ router.beforeEach((to, from, next) => {
        }
      })
    }
-    if (to.path.includes('/super/ranking/')) { //匹配包含此路径的 侧边栏数据
+    if (to.path.includes('/super/ranking/') && process.env.VUE_APP_TYPE === 'admin') { //匹配包含此路径的 侧边栏数据
      store.commit('SET_CUSTOMIZE', true);
      store.commit('SET_SLIDER_MENU', 'rankMenuData');
    }
--- a/src/views/demoPage.vue
+++ b/src/views/demoPage.vue
@ -14,9 +14,9 @@ import { mapState } from 'vuex';
 import GuipSwitch from '@/components/GuipSwitch.vue';
 import GuipButton from '@/components/GuipButton.vue';
 import HoverButton from '@/components/HoverButton.vue'
-import Franchise from '@/views/agent/Franchise.vue'
-import Franchise1 from '@/views/agent/Franchise.vue'
-import Register from '@/views/Register.vue'
+// import Franchise from '@/views/agent/Franchise.vue'
+// import Franchise1 from '@/views/agent/Franchise.vue'
+// import Register from '@/views/Register.vue'
 export default {
    // 收款方式设置
    name: '',
@ -25,9 +25,9 @@ export default {
        GuipSwitch,
        GuipButton,
        HoverButton,
-        Franchise,
-        Franchise1,
-        Register,
+        // Franchise,
+        // Franchise1,
+        // Register,

    },
    data() {
--- a/vue.config.js
+++ b/vue.config.js
@ -1,8 +1,133 @@
+// const path = require('path');
+// const TerserPlugin = require('terser-webpack-plugin');
+// const webpack = require('webpack')
+// module.exports = {
+//   // publicPath: '/new/',
+//   devServer: {
+//     proxy: {
+//       '/supernew': {
+//         target: 'http://adminnew.pengda.checkcopy.com/',
+//         changeOrigin: true,
+//       },
+//       '/agentnew': {
+//         target: 'http://adminnew.pengda.checkcopy.com/',
+//         changeOrigin: true,
+//       }
+//     }
+//   },
+//   configureWebpack: {
+//     plugins: [
+//       new webpack.DefinePlugin({
+//         'process.env.VUE_APP_TYPE': JSON.stringify(process.env.VUE_APP_TYPE || 'client'),
+//       }),
+//     ],
+//     module: {
+//       rules: [
+//         {
+//           test: /\.js$/,
+//           exclude: /node_modules/,
+//           use: {
+//             loader: 'babel-loader',
+//           },
+//         },
+//         {
+//           test: /(client|admin)-routes\.json$/, // 匹配路由文件
+//           use: [
+//             {
+//               loader: 'file-loader',
+//               options: {
+//                 name: '[name].[ext]',
+//                 outputPath: 'router/', // 输出到 dist/router/
+//               },
+//             },
+//           ],
+//         },
+//       ]
+//     },
+//     // chainWebpack:config => {
+//       // 根据模式排除不需要的视图组件
+//       // const mode = process.env.VUE_APP_TYPE
+//       // config.plugin('ignore')
+//       // .use(require('webpack').IgnorePlugin, [
+//       //   new RegExp(`src/views/${mode === 'client' ? 'mode2' : 'mode1'}`)
+//       // ])
+//     // },
+//     // chainWebpack: config => {
+//     //   // 根据环境变量解析路由文件
+//     //   config.resolve.alias.set(
+//     //     '@active-router',
+//     //     path.resolve(__dirname, `src/router/${process.env.VUE_APP_TYPE || 'admin'}-routes.json`)
+//     //   )
+      
+//     //   // 确保只打包当前模式需要的路由文件
+//     //   config.plugin('define').tap(definitions => {
+//     //     definitions[0]['process.env'].VUE_APP_TYPE = 
+//     //       JSON.stringify(process.env.VUE_APP_TYPE)
+//     //     return definitions
+//     //   })
+//     // },
+//      // plugins: [
+//       // new webpack.DefinePlugin({
+//       //   'process.env.ROUTES_FILE': JSON.stringify(
+//       //     process.env.VUE_APP_TYPE === 'client' 
+//       //       ? 'client-routes.json' 
+//       //       : 'admin-routes.json'
+//       //   )
+//       // })
+//     // ],
+//     optimization: {
+//       minimizer: [
+//         new TerserPlugin({
+//           terserOptions: {
+//             format: {
+//               comments: /^\**!|@preserve|@license|@cc_on/i // 保留特定注释
+//             }
+//           },
+//           extractComments: false // 不提取注释到单独文件
+//         })
+//       ],
+//       splitChunks: {
+//         cacheGroups: {
+//           // 为每套路由创建单独的chunk
+//           mode1Routes: {
+//             test: /[\\/]router[\\/]mode1[\\/]/,
+//             name: 'mode1-routes',
+//             chunks: 'all',
+//             enforce: true
+//           },
+//           mode2Routes: {
+//             test: /[\\/]router[\\/]mode2[\\/]/,
+//             name: 'mode2-routes',
+//             chunks: 'all',
+//             enforce: true
+//           }
+//         }
+//       }
+//     },
+//     output: {
+//       filename: '[name].[contenthash:8].js',
+//       chunkFilename: '[name].[contenthash:8].js'
+//     },
+//     resolve:{
+//       alias:{
+//         '@':path.resolve(__dirname, 'src/')
+//       }
+//     }
+//   },
+// };
+
 const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
-const webpack = require('webpack')
+const webpack = require('webpack');
+
+// 获取当前构建类型（admin或client），默认为admin
+const currentType = process.env.VUE_APP_TYPE || 'admin';
+
 module.exports = {
-  // publicPath: '/new/',
+  // 基本路径
+  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
+  
+  // 开发服务器配置
  devServer: {
    proxy: {
      '/supernew': {
@ -15,7 +140,46 @@ module.exports = {
      }
    }
  },
+  
+  // 页面配置 - 关键修改点
+  // pages: {
+  //   admin: {
+  //     entry: 'src/admin-main.js',
+  //     template: 'public/index.html',
+  //     filename: 'index.html',
+  //     // 根据环境排除不需要的chunks
+  //     chunks: ['chunk-vendors', 'chunk-common', 'admin']
+  //   }
+  // },
+  
+  // 配置Webpack
  configureWebpack: {
+    plugins:  [
+      new webpack.DefinePlugin({
+        'process.env.VUE_APP_TYPE': JSON.stringify(currentType),
+      }),
+      // 使用IgnorePlugin排除不需要的页面
+      new webpack.IgnorePlugin({
+        checkResource(resource) {
+          const isAdminBuild = currentType === 'admin';
+          const isClientBuild = currentType === 'client';
+          
+          // 构建admin时排除client页面
+          if (isAdminBuild && resource.includes('/src/views/agent/')) {
+            console.log('Excluding client resource:', resource);
+            return true;
+          }
+          
+          // 构建client时排除admin页面
+          if (isClientBuild && resource.includes('/src/views/super/')) {
+            console.log('Excluding admin resource:', resource);
+            return true;
+          }
+          
+          return false;
+        }
+      })
+    ],
    module: {
      rules: [
        {
@ -25,7 +189,22 @@ module.exports = {
            loader: 'babel-loader',
          },
        },
-      ],
+         // 添加SCSS规则
+         {
+          test: /\.scss$/,
+          use: [
+            {
+              loader: 'sass-loader',
+              options: {
+                implementation: require('sass'),
+                sassOptions: {
+                  indentedSyntax: false
+                }
+              }
+            }
+          ]
+        }
+      ]
    },
    optimization: {
      minimizer: [
@ -37,25 +216,80 @@ module.exports = {
          },
          extractComments: false // 不提取注释到单独文件
        })
-      ]
+      ],
+      splitChunks: {
+        cacheGroups: {
+          // 公共代码提取
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: 'chunk-vendors',
+            chunks: 'all',
+            priority: 10
+          },
+          common: {
+            name: 'chunk-common',
+            minChunks: 2,
+            chunks: 'initial',
+            priority: 5,
+            reuseExistingChunk: true
+          }
+        }
+      }
    },
    output: {
      filename: '[name].[contenthash:8].js',
      chunkFilename: '[name].[contenthash:8].js'
    },
-    plugins: [
-      new webpack.DefinePlugin({
-        'process.env.ROUTES_FILE': JSON.stringify(
-          process.env.VUE_APP_TYPE === 'client' 
-            ? 'client-routes.json' 
-            : 'admin-routes.json'
-        )
-      })
-    ],
    resolve:{
      alias:{
        '@':path.resolve(__dirname, 'src/')
      }
    }
  },
+  
+  // 链式操作 - 更精确地控制打包内容
+  // chainWebpack: config => {
+  //   // 根据构建类型排除不需要的页面
+  //   if (currentType === 'admin') {
+  //     // 排除client页面
+  //     config.plugin('ignore')
+  //       .use(webpack.IgnorePlugin, [{
+  //         resourceRegExp: /^\.\/client-pages$/,
+  //         contextRegExp: /src[\\/]views/
+  //       }]);
+  //   } else if (currentType === 'client') {
+  //     // 排除admin页面
+  //     config.plugin('ignore')
+  //       .use(webpack.IgnorePlugin, [{
+  //         resourceRegExp: /^\.\/admin-pages$/,
+  //         contextRegExp: /src[\\/]views/
+  //       }]);
+  //   }
+    
+  //   // 确保只打包当前模式需要的路由文件
+  //   config.resolve.alias.set(
+  //     '@active-router',
+  //     path.resolve(__dirname, `src/router/${currentType}-routes.json`)
+  //   );
+  //   config.plugin('webpack-bundle-analyzer')
+  //   .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
+  // }
+   // 链式操作
+   chainWebpack: config => {
+    // 根据构建类型设置路由文件别名
+    config.resolve.alias.set(
+      '@active-router',
+      path.resolve(__dirname, `src/router/${currentType}-routes.json`)
+    );
+    // config.resolve.alias.delete('@active-router');
+    
+    // 生产环境下添加打包分析
+    if (process.env.NODE_ENV === 'production') {
+      config.plugin('webpack-bundle-analyzer')
+        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [{
+          analyzerMode: 'disabled', // 默认禁用，可通过--report参数启用
+          generateStatsFile: true
+        }]);
+    }
+  }
 };