uniapp 移动端pages.json拆包
        【摘要】 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)