uniapp 移动端pages.json拆包

举报
皮耶罗夫斯基 发表于 2025/04/14 17:25:07 2025/04/14
【摘要】 uniapp

1、下载依赖 uni-pages-hot-modules

"uni-pages-hot-modules": "1.0.3",

2、vite配置修改

import { resolve } from 'path';
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import uniHot from 'uni-pages-hot-modules';
uniHot.setupHotJs();
const pathResolve = (dir) => {
  return resolve(__dirname, '.', dir);
};

export default defineConfig({
  transpileDependencies: [],
  plugins: [
    uni(),
    uniHot.createHotVitePlugin(),

  ],
  root: process.cwd(),
  server: {
    port: 9999,
  },

  resolve: {
    alias: [
      // 绝对路径重命名:/@/xxxx => src/xxxx
      {
        find: /\/@\//,
        replacement: pathResolve('src') + '/',
      },
      {
        find: /^~/,
        replacement: '',
      },
    ],
  },
  // 发布时删除console
  build: {
    minify: 'terser', //'terser',
    rollupOptions: {
      external: [''],
    },
    terserOptions: {
      compress: {
        drop_console: false,
      },
    },
  },
});

3、pages.json修改

// #exec hotJs('./pages.js')

4、同级建立一个pages.js

/*
 * @Description: 
 * @Author: lu jia ming
 * @Date: 2025-03-19 11:57:43
 * @LastEditors: lu jia ming
 * @LastEditTime: 2025-03-21 17:58:11
 */
// 获取uniapp的条件编译环境变量
const uniContext = require('@dcloudio/uni-cli-shared/dist/preprocess/context').getPreVueContext();

// 将老版本的pages.json文件
module.exports = {
  easycom: {
    autoscan: true,
    custom: {
      '^uni-(.*)': '@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue',
      '^zb-popover': '@/uni_modules/zb-popover/zb-popover',
      '^o-divider': '@/uni_modules/uni-divider/o-divider.vue',
      '^uv-(.*)': '@climblee/uv-ui/components/uv-$1/uv-$1.vue',
    },
  },
  pages: require('./app_modules/index.js'),
  subPackages: require('./subpackage_modules/index.js'),
  globalStyle: {
    navigationBarTextStyle: 'black',
    // 判断是否是H5环境
    navigationBarTitleText: uniContext.H5 ? '低代码APP' : '非H5低代码APP',
    backgroundColorTop: '#FFFFFF',
  },
  tabBar: {
    color: '#858585',
    selectedColor: '#1A9AFF',
    borderStyle: 'black',
    backgroundColor: '#ffffff',
    list: [
      {
        pagePath: 'pages/home/index',
        iconPath: 'static/images/tabbar/home-icon.png',
        selectedIconPath: 'static/images/tabbar/home-icon-h.png',
        text: '工作台',
      },
      {
        pagePath: 'pages/iot/homePage',
        iconPath: 'static/images/tabbar/list-icon.png',
        selectedIconPath: 'static/images/tabbar/list-icon-h.png',
        text: '物联网',
      },
      {
        pagePath: 'pages/mine/mine',
        iconPath: 'static/images/tabbar/mine-icon.png',
        selectedIconPath: 'static/images/tabbar/mine-icon-h.png',
        text: '我的',
      },
    ],
  },
};

5、分包内容:新建一个分包文件夹 subpackage_modules,内部新建一个index.js

/*
 * @Description: 
 * @Author: lu jia ming
 * @Date: 2025-03-19 14:03:41
 * @LastEditors: lu jia ming
 * @LastEditTime: 2025-03-21 17:51:10
 */
const files = require.context('.', true, /\.js$/)
const modules = []
files.keys().forEach(key => {
    if (key === './index.js') return
    const item = files(key)
    modules.push(...item)
})
module.exports = modules


例如 toDoCenterPages.js

/*
 * @Description:
 * @Author: lu jia ming
 * @Date: 2025-03-19 14:03:41
 * @LastEditors: lu jia ming
 * @LastEditTime: 2025-03-19 14:05:17
 */
module.exports = [
  {
    root: 'toDoCenterPages',
    pages: [
      {
        path: 'index',
        style: {
          navigationBarTitleText: '我的流程',
          navigationBarBackgroundColor: '#fff',
        },
      },
    ],
  },
];

6、主包内容:我配置的src/app_modules文件夹,目录结构如下

新建index.js

/*
 * @Description:
 * @Author: lu jia ming
 * @Date: 2025-03-19 13:53:10
 * @LastEditors: lu jia ming
 * @LastEditTime: 2025-03-19 13:53:20
 */
const files = require.context('.', true, /\.js$/);
const modules = [];
files.keys().forEach((key) => {
  if (key === './index.js') return;
  const item = files(key);
  modules.push(...item);
});
module.exports = modules;

新建路由common.js

/*
 * @Description:
 * @Author: lu jia ming
 * @Date: 2025-03-19 14:08:42
 * @LastEditors: lu jia ming
 * @LastEditTime: 2025-03-19 14:09:21
 */
module.exports = [
  {
    path: 'pages/login/login',
    style: {
      navigationBarTitleText: '登录',
      navigationStyle: 'custom',
    },
  },
  {
    path: 'pages/home/index',
    style: {
      navigationBarTitleText: '工作台',
      navigationBarBackgroundColor: '#fff',
    },
  },
  {
    path: 'pages/mine/mine',
    style: {
      navigationBarTitleText: '我的',
      enablePullDownRefresh: false,
      navigationStyle: 'custom',
    },
  },
  xxxxxxx 类似文件内容
];

例如:src/app_modules/crm/PagesConfig.js

/*
 * @Description: 
 * @Author: lu jia ming
 * @Date: 2025-03-19 11:58:46
 * @LastEditors: lu jia ming
 * @LastEditTime: 2025-04-02 19:59:21
 */
module.exports = [
  {
    path: 'app_modules/crm/pages/home',
    style: {
      navigationStyle: 'custom',
    },
  },
  {
    path: 'app_modules/crm/pages/index/index',
    style: {
      navigationStyle: 'custom',
    },
  },
  {
    path: 'app_modules/crm/pages/customer/index',
    style: {
      navigationStyle: 'custom',
      enablePullDownRefresh: true,
    },
  },
];
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。