【前端】环境配置(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

相关推荐

  • 自定义视图组件(v4)

    阅读之前 你应该: 了解DSL相关内容。母版-布局-DSL 渲染基础(v4) 了解SPI机制相关内容。组件SPI机制(v4) 什么是视图组件 我们将一个视图中提供数据源的组件称为视图组件。 下面,我们将根据提供的示例布局进行进一步介绍。 示例布局(默认表格视图布局) <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> view: 视图标签;一个视图中的所有组件将共享数据源,视图的数据源通过视图组件进行提供。(在这个示例中,该视图的数据源通过widget="table"(TableWidget)提供) pack: 容器组件标签; element: 通用元素组件标签; xslot:dsl插槽; 根据标签性质,我们可以将这个示例布局进一步简化,只留下我们目前要关注的主要内容。 <view type="TABLE"> <element widget="table" slot="table"> <xslot name="fields" /> </element> </view> 在以上示例布局中,有且仅有一个组件会向视图提供数据源,那就是widget="table"(TableWidget)这个组件。我们接下来将对这个组件进行自定义,以实现业务中所需的列表(List)数据源展示方式。 1 平台组件简介 平台提供的基础组件有如下几种: 组件名称 描述 BaseElement element标签通用组件 BaseElementViewWidget 通用视图组件 BaseElementObjectViewWidget 对象(Object)数据源通用视图组件 BaseElementListViewWidget 列表(List)数据源通用组件 平台提供的内置组件有如下几种:(均使用element标签) 组件名称 标签 视图类型 描述 TableWidget widget="table" TABLE 内置表格组件 FormWidget widget="form" FORM 内置表单组件 DetailWidget widget="detail" DETAIL 内置详情组件 GallertWidget widget="gallery" GALLERY 内置画廊组件 TreeWidget/CardCascaderWidget widget="tree/cardCascader" TREE 内置树/卡片级联组件 我们可以根据业务场景,继承不同的组件,来实现自己的业务场景。在自定义过程中,我们建议尽可能的将逻辑控制在组件内部。如果场景是唯一且确定的,也可以进行一些特殊逻辑处理。 2 场景:实现一个虚拟滚动表格(不使用分页器) 2.1 确定组件名称 widget="VirtualTable" 通过布局设置自定义组件名称 我们将原表格布局中的widget="table"改为我们所需要的自定义组件名称即可。 多个视图可以绑定同一个布局,所以这种修改方式更适用于大范围使用相同布局的情况。 <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar> <xslot name="actions" /> </element> <element widget="VirtualTable" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> 通过DSL设置自定义组件名称 我们使用了slot="table"这个插槽,通过属性合并覆盖的方式,在DSL上直接指定我们所需要的自定义组件名称即可。 这种修改方式更适用于个别几个视图需要使用该组件的情况。 <view type="TABLE"> <template slot="table" widget="VirtualTable"> …… </template> </view> 2.2 简单实现一个基础功能的虚拟滚动表格 定义一个VirtualTable.vue文件,使用平台提供的oio-table组件。目前内部采用vxe-table封装,相关api文档 点击查看 props定义: showDataSource: 当前展示数据;通过平台内置BaseElementListViewWidget组件提供。 <template> <oio-table ref="table" border show-overflow height="400" :row-config="{ isHover: true…

    2023年11月1日
    1.5K00
  • 函数扩展

    oinone 平台内置了一些函数, 如果当前函数不满足,那么可以通过扩展的方式添加函数 后端实现 后端实现 import {Expression} from '@kunlun/dependencies' Expression.getInstance().registerFunction(); registerFunction函数的参数如下 /** @param {string} name 函数名字 @param {unknown[]} argTypes 参数类型 @param {Function} handle 回调函数 */ 函数名需要跟后端的保持一致import {Expression} from '@kunlun/dependencies';Expression.getInstance().registerFunction('FUNCTION_NAME', ['number|string'], (input: number | string) => { // todo});第二个参数要注意下,该参数跟回调函数里面的参数要保持一致 Expression.getInstance().registerFunction('FUNCTION_NAME', ['number'], (input: number ) => { // todo } ); Expression.getInstance().registerFunction('FUNCTION_NAME', ['string'], (input: string ) => { // todo } ); Expression.getInstance().registerFunction('FUNCTION_NAME', ['array'], (input: any[] ) => { // todo } );

    2023年11月9日
    2.4K00
  • OioMessage 全局提示

    全局展示操作反馈信息。 何时使用 可提供成功、警告和错误等反馈信息。 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。 API 组件提供了一些静态方法,使用方式和参数如下: OioMessage.success(title, options) OioMessage.error(title, options) OioMessage.info(title, options) OioMessage.warning(title, options) options 参数如下: 参数 说明 类型 默认值 版本 duration 默认 3 秒后自动关闭 number 3 class 自定义 CSS class string –

    2023年12月18日
    1.5K00
  • 在前端视图添加自定义的区域块

    添加自定义区域块 平台提供了一系列默认的视图布局,可以帮助开发人员快速构建出复杂的企业应用系统。当然,我们可以使用自定义区域块来扩展表格、表单、画廊、树形等视图。 自定义区域块概述 平台视图布局都是通过XML配置实现的。在视图布局中,我们可以使用一些特定的元素标签来构建视图的表头、表单、搜索区域等部分。而自定义区域块,就是这些元素标签之外的部分。我们可以通过在视图布局的XML中添加自定义区域块,来扩展页面功能。 视图类型及相关元素 视图类型分为表格(TABLE)、表单(FORM)、画廊(GALLERY)、树形(TREE)等。不同类型的视图布局,包含的元素也有所不同。 下面是几种视图类型及其对应的元素: 表格:搜索区域、表格主体,其中表格主体包含了表格上面的动作、表格区域等部分。 表单:表单区域,包含了表单动作、表单区域等部分。 画廊:动作、卡片详细信息。 在表格页面添加自定义区域块 以下是一个示例,演示如何在表格页面顶部添加自定义区域块。 1. 修改视图布局XML 首先,我们需要修改表格视图的XML布局,添加自定义区域块元素标签。 <view type="TABLE"> <!– 这是搜索区域 –> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <!– 这是表格主体 –> <pack widget="group" slot="tableGroup"> <!– 在这里添加自定义区域块元素标签 –> <element widget="MyCustomElement"></element> <!– 这是表格上面的动作 –> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <!– 这是表格区域 –> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view> 在上述代码中,我们添加了一个名为MyCustomElement的元素标签。这将作为我们自定义区域块的容器。 2. 创建自定义Vue组件 接下来,我们需要创建一个Vue组件,并将其指定为自定义元素标签MyCustomElement的模板。 <template> <div> <!– 在这里编写自定义区域块的内容 –> <p>Hello, world!</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ components: { }, props: [], setup(props) { return {}; } }); </script> 在上述代码中,我们定义了一个非常简单的Vue组件,它在页面上显示一个“Hello, world!”的文本信息。 3. 创建自定义Element Widget 为了使自定义Vue组件与XML布局文件关联起来,我们需要创建一个对应的Element Widget。 import { BaseElementWidget, SPI, BaseElementViewWidget, Widget, ViewMode, FormWidget, BaseElementWidgetProps } from '@kunlun/dependencies'; import MyCustomElement from './MyCustomElement.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyCustomElementWidget' })) export class MyCustomElementWidget extends BaseElementWidget { public initialize(props: BaseElementWidgetProps): this { super.initialize(props) this.setComponent(MyCustomElement) return this } } 在上述代码中,我们继承了BaseElementWidget类,并在其中指定了Vue组件MyCustomElement。这样,XML布局文件中的元素标签就能够正确地与Vue组件关联起来。 4. 注册视图布局 最后,我们需要将上述代码配置注册。具体而言,我们需要调用registerLayout方法来将XML布局文件、模块名和视图类型进行关联。 import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" />…

    2023年11月1日
    2.9K00
  • 自定义表格支持合并或列、表头分组

    本文将讲解如何通过自定义实现表格支持单元格合并和表头分组。 点击下载对应的代码 在学习该文章之前,你需要先了解: 1: 自定义视图2: 自定义视图、字段只修改 UI,不修改数据和逻辑3: 自定义视图动态渲染界面设计器配置的视图、动作 1. 自定义 widget 创建自定义的 MergeTableWidget,用于支持合并单元格和表头分组。 // MergeTableWidget.ts import { BaseElementWidget, SPI, ViewType, TableWidget, Widget, DslRender } from '@kunlun/dependencies'; import MergeTable from './MergeTable.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'MergeTableWidget' }) ) export class MergeTableWidget extends TableWidget { public initialize(props) { super.initialize(props); this.setComponent(MergeTable); return this; } /** * 表格展示字段 */ @Widget.Reactive() public get currentModelFields() { return this.metadataRuntimeContext.model.modelFields.filter((f) => !f.invisible); } /** * 渲染行内动作VNode */ @Widget.Method() protected renderRowActionVNodes() { const table = this.metadataRuntimeContext.viewDsl!; const rowAction = table?.widgets.find((w) => w.slot === 'rowActions'); if (rowAction) { return rowAction.widgets.map((w) => DslRender.render(w)); } return null; } } 2. 创建对应的 Vue 组件 定义一个支持合并单元格与表头分组的 Vue 组件。 <!– MergeTable.vue –> <template> <vxe-table border height="500" :column-config="{ resizable: true }" :merge-cells="mergeCells" :data="showDataSource" @checkbox-change="checkboxChange" @checkbox-all="checkedAllChange" > <vxe-column type="checkbox" width="50"></vxe-column> <!– 渲染界面设计器配置的字段 –> <vxe-column v-for="field in currentModelFields" :key="field.name" :field="field.name" :title="field.label" ></vxe-column> <!– 表头分组 https://vxetable.cn/v4.6/#/table/base/group –> <vxe-colgroup title="更多信息"> <vxe-column field="role" title="Role"></vxe-column> <vxe-colgroup title="详细信息"> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-colgroup> </vxe-colgroup> <vxe-column title="操作" width="120"> <template #default="{ row, $rowIndex }"> <!– 渲染界面设计器配置的行内动作 –> <row-action-render :renderRowActionVNodes="renderRowActionVNodes" :row="row" :rowIndex="$rowIndex" :parentHandle="currentHandle" ></row-action-render> </template> </vxe-column> </vxe-table> <!– 分页 –> <oio-pagination :pageSizeOptions="pageSizeOptions" :currentPage="pagination.current"…

    2025年1月9日
    2.0K00

Leave a Reply

Please Login to Comment