Ice飞冰页面配置&菜单配置&日志打印&环境配置《六》

菜单权限#

---

首先在 src/layouts/BasicLayout/menuConfig.ts 中增加以下的内容：

export const asideMenuConfig = [

{

name: ‘Home’,

path: ‘/’,

• auth: [‘guest’]

},

];

然后在 src/layouts/BasicLayout/components/PageNav/index.tsx中[配置](菜单配置 | 飞冰 (ice.work))

日志打印

===================================================================

只希望在开发环境中打印日志，在生产环境中则不打印日志，或者设置日志的级别，避免生产环境的调试日志在生产环境中出现

日志分类#

框架日志分为 TRACE、DEBUG、INFO、WARN、ERROR 和 SILENT 6 个级别，分别在不同的场景下使用：

• logger.trace(msg)：输出一个堆栈跟踪

• logger.debug(msg)：输出一个调试日志

• logger.info(msg)：输出一个信息日志

• logger.warn(msg)：输出一个警告日志

• logger.error(msg)：输出一个错误日志

使用#

import { logger } from ‘ice’;

logger.info(‘== info ==’);

level#

在某些场景下也可在 src/config.ts 中根据不同环境配置 loglevel:

export default {

default: {

loglevel: ‘warn’

},

production: {

loglevel: ‘error’

}

}

在 src/app.ts 中将配置的 loglevel 传递给 logger：

import { runApp, config } from ‘ice’;

// 用于配置

const appConfig = {

logger: {

level: config.loglevel

}

};

runApp(appConfig);

环境配置

===================================================================

icejs 支持区分不同环境，开发者可根据环境区分工程配置以及运行时配置。常见场景：

• 多套构建环境，每个环境的工程配置不一样

• 应用运行时的一些配置项需要根据环境切换

通过命令行参数可以设置不同的环境，默认情况下支持 start/build 两个环境，对应的即 icejs start/build 两个命令，开发者可以通过 --mode 参数来扩展环境：

{

“scripts”: {

“start”: “icejs start --mode local”,

“build:daily”: “icejs build --mode daily”,

“build”: “icejs build --mode prod”

}

}

区分工程配置#

在定义好环境之后，即可在 build.json 中通过 modeConfig 来根据环境区分配置了：

{

“alias”: {},

“modeConfig”: {

“daily”: {

“define”: {},

“vendor”: false

},

“prod”: {

“define”: {},

“vendor”: true,

“plugins”: [“build-plugin-esbuild”]

}

}

}

同时在本地插件 build.plugin.js 也可以从 context 上获取到当前 mode：（没有用到这个插件）

module.exports = ({ context }) => {

const { command, commandArgs } = context;

const mode = commandArgs.mode || command;

};

区分运行时配置#

在定义好环境之后，前端代码中即可通过 APP_MODE 拿到当前环境：

import { APP_MODE } from ‘ice’;

console.log(‘APP_MODE’, APP_MODE);

当然大多数时候你都不需要关心 APP_MODE 这个变量，只要按照约定的方式区分不同环境的配置即可。在 src/config.ts 中编写不同环境的配置：

// src/config.ts

export default {

// 默认配置

default: {

appId: ‘123’,

baseURL: ‘/api’,

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

可。在 src/config.ts 中编写不同环境的配置：

// src/config.ts

export default {

// 默认配置

default: {

appId: ‘123’,

baseURL: ‘/api’,

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

[外链图片转存中…(img-JDKmR33d-1718172231545)]