【前端】环境配置(v4)

环境配置

前端环境配置包含.env编译时配置和RuntimeConfig运行时配置

编译时配置 .env

属性 类型 默认值 作用
BASE_PATH [String] 统一配置URL请求路径前缀
STATIC_IMG [String] 静态资源路径
RUNTIME_CONFIG_BASE_URL [String] 运行时配置文件URL请求路径前缀
RUNTIME_CONFIG_FILENAME [String] manifest 运行时配置文件名
MESSAGE_LEVEL DEBUG、SUCCESS、INFO、WARN、ERROR 消息级别

BASE_PATH

当配置BASE_PATH=/test时,前端所有请求就将添加该前缀。

/login登录页,将自动修改为/test/login

MESSAGE_LEVEL

当配置消息级别时,全局的消息通知将根据消息级别进行过滤。

  • DEBUG:允许全部级别的消息通知。
  • SUCCESS:仅允许ERRORWARNINFOSUCCESS级别的消息通知。
  • INFO:仅允许ERRORWARNINFO级别的消息通知。
  • WARN:仅允许ERRORWARN级别的消息通知。
  • ERROR:仅允许ERROR级别的消息通知。

运行时配置 RuntimeConfig

运行时配置是作为编译时配置的补充。

manifest.js
runtimeConfigResolve({
  ......
});
开发时使用运行时配置

创建{PROJECT_NAME}/public/manifest.js文件。

kunlun-boot/public/manifest.js

生产环境使用运行时配置

nginx中配置的dist访问路径下,创建manifest.js文件。

若将/opt/pamirs/frontend/dist作为访问路径,则创建/opt/pamirs/frontend/dist/manifest.js文件。

注意事项
  • 编译时可能使用编译时配置改变运行时配置文件的路径和文件名,注意文件名和访问路径必须匹配。
  • 在浏览器中访问时,nginx或者浏览器会对js文件会进行缓存处理,会导致运行时配置不能及时生效。最好的办法是配置nginx时,禁用manifest.js文件缓存。
  • manifest.js文件中建议不要包含任何与配置项无关的字符(包括注释),该文件在通过网络传输过程中,无法处理这些无效内容。

面包屑配置 breadcrumb

配置方式
runtimeConfigResolve({
  breadcrumb?: boolean | BreadcrumbConfig
});
BreadcrumbConfig
/**
 * 面包屑配置
 */
export interface BreadcrumbConfig extends RuntimeConfigOptions, EnabledConfig {
  /**
   * <h3>是否启用</h3>
   * <p>启用时,需配合mask渲染对应的面包屑组件</p>
   * <p>默认: 开启</p>
   */
  enabled?: boolean;
  /**
   * <h3>首页配置</h3>
   * <p>boolean值与{@link BreadcrumbHomepageConfig#enabled}等效</p>
   */
  homepage?: boolean | BreadcrumbHomepageConfig;
}

/**
 * 首页配置
 */
export interface BreadcrumbHomepageConfig extends RuntimeConfigOptions, EnabledConfig {
  /**
   * <h3>首项显示首页</h3>
   * <p>默认: 开启</p>
   */
  enabled?: boolean;
  /**
   * <h3>首页类型</h3>
   * <p>默认: 'application'</p>
   */
  type?: 'application' | 'module';
}

多选项卡配置 multiTabs

配置方式
runtimeConfigResolve({
  multiTabs?: boolean | MultiTabsConfig
});
MultiTabsConfig
/**
 * 多标签页配置
 */
export interface MultiTabsConfig extends RuntimeConfigOptions, EnabledConfig {
  /**
   * <h3>是否启用(非运行时)</h3>
   * <p>启用时,需配合mask渲染对应的多标签页管理组件</p>
   * <p>默认: 开启</p>
   */
  enabled?: boolean;
  /**
   * <h3>是否使用内联多标签页</h3>
   * <p>仅在使用默认mask时生效</p>
   */
  inline?: boolean;
  /**
   * <h3>显示模块Logo</h3>
   * <p>默认: 开启</p>
   */
  showModuleLogo?: boolean;

  /**
   * <h3>最多标签页数量</h3>
   * <p>在页面中显示的标签页总数,标签页显示在页面中,但标签页的页面不一定被缓存</p>
   * <p>当打开的标签页数量超过该配置时,将自动关闭最早打开的标签页</p>
   */
  maxCount?: number;

  /**
   * <h3>最多缓存标签页数量</h3>
   * <p>当缓存的标签页数量超过该配置时,将自动清理最早打开的标签页,但不会关闭该标签页。当标签页被重新激活时,页面将重新加载。</p>
   * <p>默认: 10</p>
   */
  maxCacheCount?: number;

  /**
   * <h3>是否启用拖拽排序</h3>
   * <p>默认: 开启</p>
   */
  draggable?: boolean;

  /**
   * <h3>应用首页配置</h3>
   * <p>boolean值与{@link MultiTabsApplicationHomepageConfig#enabled}等效</p>
   */
  homepage?: boolean | MultiTabsApplicationHomepageConfig;

  /**
   * <h3>模块首页配置</h3>
   * <p>boolean值与{@link MultiTabsModuleHomepageConfig#enabled}等效</p>
   */
  moduleHomepage?: boolean | MultiTabsModuleHomepageConfig;

  /**
   * 模块过滤
   */
  filter?: string[];
}

/**
 * 应用首页配置
 */
export interface MultiTabsApplicationHomepageConfig extends RuntimeConfigOptions, EnabledConfig {
  /**
   * <h3>是否启用应用首页</h3>
   * <p>将应用首页进行特殊标记,并永远插入到标签页的首个位置</p>
   * <p>默认: 开启</p>
   */
  enabled?: boolean;
  /**
   * <h3>自动获取应用首页</h3>
   * <p>默认: 开启</p>
   */
  auto?: boolean;
  /**
   * <h3>当前激活标签页为首页时是否自动隐藏</h3>
   * <p>在未使用模块首页时生效</p>
   * <p>默认: 非内联时默认开启,内联时默认关闭</p>
   */
  autoInvisible?: boolean;
}

/**
 * 模块首页配置
 */
export interface MultiTabsModuleHomepageConfig extends RuntimeConfigOptions, EnabledConfig {
  /**
   * <h3>是否启用模块首页</h3>
   * <p>多标签页在切换模块时进行初始化</p>
   * <p>默认: 关闭</p>
   */
  enabled?: boolean;
  /**
   * <h3>自动获取模块首页</h3>
   * <p>默认: 开启</p>
   */
  auto?: boolean;
}

登录相关配置

参考文档:登录页自定义配置如何使用

插件配置 plugins

配置方式
runtimeConfigResolve({
  plugins?: PluginsLoaderConfig
});
PluginsLoaderConfig
/**
 * 插件加载配置
 */
export interface PluginsLoaderConfig {
  /**
   * 挂载指定外部js和css;数组默认使用js加载
   */
  mounted?: string[] | { js: string[]; css: string[] };
  /**
   * 使用低无一体组件;默认为false
   */
  usingRemote?: boolean;
}

Oinone社区 作者:oinone原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/31.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
oinone's avataroinone
Previous 2023年6月20日 pm4:07
Next 2023年11月2日 pm1:58

相关推荐

  • 前端视图的元数据与数据的传递、交互

    在阅读本篇文章之前,您需要学习以下知识点: 1: 元数据 视图的元数据 在日常开发中,我们会经常遇到自定义的字段、动作、视图需要界面设计器配置的数据,这些数据可能是当前页面的字段,也有可能动作,那么如何获取呢? 视图元数据分为两种:1: 当前视图(metadataRuntimeContext)2: 根视图(rootRuntimeContext) 那么这两种类型怎么区分呢? 举个例子:1: 如果当前字段是在表单中,那么当前视图就是表单,根视图就表单的父级视图,如果只有一个表单视图,那么当前视图就是根视图。2: 如果当前视图是表单,但是表单里面有个表格,对于表格字段而言,当前视图就是表格,根视图就是表单。 当前视图的元数据(metadataRuntimeContext) 在前端,我们通过 metadataRuntimeContext 来获取视图的元数据,例如: export class CustomFormStringFieldSingleWidget extends FormStringFieldSingleWidget { protected mounted(): void { console.log(this.metadataRuntimeContext); } /** * 界面设计器配置的动作 */ @Widget.Reactive() protected get modelActions() { return this.metadataRuntimeContext.model.modelActions } /** * 界面设计器配置的字段 */ @Widget.Reactive() protected get modelFields() { return this.metadataRuntimeContext.model.modelFields } } 属性名 类型 可选性 描述 viewAction RuntimeViewAction 是 运行时跳转动作(通过跳转动作创建的运行时上下文具备该属性) module RuntimeModule 否 运行时模块 model RuntimeModel 否 运行时模型 view RuntimeView 否 运行时视图 viewLayout DslDefinition \| undefined 否 视图布局 DSL,从运行时视图解析获得 viewDsl DslDefinition \| undefined 否 视图模板 DSL,从运行时视图解析获得 viewTemplate DslDefinition 否 视图最终执行 DSL,从运行时视图解析获得或根据布局 DSL 和模板 DSL 合并生成 getModel (model: string, isBelong?: boolean) => GetModelResult \| undefined 否 获取模型,返回获取的模型和所在的运行时上下文 getModelField (data: string, isBelong?: boolean) => GetModelFieldResult \| undefined 否 获取模型字段,返回获取的模型字段和所在的运行时上下文 getRequestModelFields (options?: GetRequestModelFieldsOptions) => RequestModelField[] 否 获取请求字段 getDefaultValue () => Promise<Record<string, unknown>> 否 获取默认值 getInitialValue () => Promise<Record<string, unknown>> 否 获取初始值 运行时模型(model) 属性名 类型 可选性 描述 id string 是 模型 id model string 否 模型编码 name string 否 技术名称 modelFields RuntimeModelField[] 否 模型字段 modelActions RuntimeAction[] 否 模型动作 type ModelType 是 模型类型 module string 是 模块编码 moduleName string 否 模块名称 moduleDefinition RuntimeModule 是…

    2024年10月8日
    3.5K00
  • 文件上传组件前端校验超128长度大小,不清楚怎么配置

    原因是拼上后端返回的文件全路径后超出了字段的存储长度,后端通过注解@Field.String(size=1024)修改字段的存储长度后重新运行一遍服务。

    2023年11月1日
    1.8K00
  • 【前端】项目开发前端知识要点地图

    概述 下面整理了目前现有的所有文章,并提供了基本的学习路径。所有使用*标记的文章属于推荐必读文章。 目录 基础篇 【路由】浏览器地址栏url参数介绍 母版-布局-DSL 渲染基础(v4)* 组件SPI机制(v4)* 组件数据交互基础(v4)* 组件生命周期(v4) 入门篇 自定义视图组件(v4)* 如何通过浏览器开发者工具提高调试效率* 如何提高自定义组件的开发效率* 自定义组件之自动渲染(组件插槽的使用)(v4)* GraphQL请求详解(v4)* 上下文在字段和动作中的应用 如何实现页面间的跳转 如何自定义指定页面的样式 进阶篇 自定义组件之手动渲染基础(v4) 自定义组件之手动渲染弹出层(v4) 自定义组件之手动渲染任意视图(v4) 【前端】IOC容器(v4) 最佳实践篇 【前端】工程结构最佳实践(v4)* 【前端】移动端工程结构最佳实践(v4)* 界面设计器实战篇 基础篇 【界面设计器】模型增删改查基础 【界面设计器】他表字段 【界面设计器】左树右表 【界面设计器】树形表格 【界面设计器】树下拉/级联选择 【界面设计器】自定义字段组件基础 展示篇 【界面设计器】自定义字段组件实战——轮播图 【界面设计器】自定义字段组件实战——表格字段组合展示 【界面设计器】自定义字段组件实战——表格字段内嵌表格 交互篇 【界面设计器】自定义字段组件实战——千分位输入框 其他 前端低无一体使用教程 如何自定义表格字段? 【界面设计器】组件开发常见问题 【前端】低无一体部署常见问题 【前端】生产环境性能调优 API文档 OioProvider详解(v4.3.0)* 前端环境配置(v4)* 默认布局模板(v4) 表格主题配置(v4) 运行时上下文API文档(v4) Class Component(ts)(v4)

    2024年5月25日
    5.2K00
  • 前端日期组件国际化支持方案

    在 oinone 平台中,系统默认支持基础的国际化翻译功能。但由于日期时间组件的国际化依赖对应语言包,而全量引入语言包会显著增加打包体积,因此前端默认仅集成了中、英文的日期时间支持。若需为日期时间组件扩展其他语言(如日语)的国际化支持,需手动导入对应语言包并完成配置,具体步骤如下: 假设我们现在国际化翻译切换成了日语,那么我们在日期时间也要支持日语,那么需要如下操作: 1: 重写 RootWidget 继承平台默认的 RootWidget,SPI 注册条件保持跟平台一致即可覆盖平台默认的RootWidget // CustomRootWidget.ts import { RootComponentSPI, RootWidget, SPIFactory } from '@oinone/kunlun-dependencies'; import Root from './Root.vue'; // 通过SPI注册覆盖平台默认的root组件 @SPIFactory.Register(RootComponentSPI.Token({ widget: 'root' })) export class CustomRootWidget extends RootWidget { public initialize() { super.initialize(); this.setComponent(Root); return this; } } 2: 覆盖 Root 组件的 Vue 文件 自定义的 Vue 文件需负责导入目标语言(如日语)的语言包,并根据当前语言环境动态切换配置。这里需要同时处理 ant-design-vue、element-plus 组件库及 dayjs 工具的语言包,确保日期组件的展示和交互统一适配目标语言。 <!– Root.vue –> <template> <a-config-provider :locale="antLocale"> <el-config-provider :locale="eleLocale"> <match :rootToken="root"> <template v-for="page in pages" :key="page.widget"> <route v-if="page.widget" :path="page.path" :slotName="page.slotName" :widget="page.widget"> <slot :name="page.slotName" /> </route> </template> <route :path="pagePath" slotName="page" :widgets="{ page: widgets.page }"> <slot name="page" /> </route> <route path="/" slotName="homePage"> <slot name="homePage" /> </route> </match> </el-config-provider> </a-config-provider> </template> <script lang="ts"> import { CurrentLanguage, EN_US_CODE, UrlHelper, ZH_CN_CODE } from '@oinone/kunlun-dependencies'; import { ConfigProvider as AConfigProvider } from 'ant-design-vue'; import { ElConfigProvider } from 'element-plus'; import dayjs from 'dayjs'; // 导入ant-design-vue语言包 import enUS from 'ant-design-vue/es/locale/en_US'; import zhCN from 'ant-design-vue/lib/locale/zh_CN'; import jaJP from 'ant-design-vue/lib/locale/ja_JP'; // 新增:日语语言包 // 导入 dayjs的语言包 import 'dayjs/locale/zh-cn'; import 'dayjs/locale/ja'; // 新增:日语语言包 // 导入element-plus语言包 import elEn from 'element-plus/dist/locale/en.mjs'; import elZhCn from 'element-plus/dist/locale/zh-cn.mjs'; import elJaJP from 'element-plus/dist/locale/ja.mjs'; // 新增:日语语言包 import { computed, defineComponent, onMounted,…

    2025年8月13日
    91500
  • 界面设计器 扩展字段的查询上下文

    默认情况下oinone平台对于查询条件,只提供的当前登录用户这一个配置,但是允许开发者扩展 开发者可以在前端代码的main.ts进行扩展 import { SessionContextOptions, ModelFieldType } from '@kunlun/dependencies'; const currentDeptOption = { ttype: ModelFieldType.String, value: '$#{currentDept}', displayName: '当前登录部门', label: '当前登录部门' }; SessionContextOptions.push(currentDeptOption as any); 加上上面的代码,然后再去界面设计器,我们就会发现,多了一个配置

    2023年11月8日
    2.4K00

Leave a Reply

Please Login to Comment