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)