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

相关推荐

  • 移动端5.0.x启动、打包代码报错

    在5.0.x版本中,移动端mobile-base包是源码开放的,所以项目在启动的时候可能会报错,请按照下面的步骤修改。 打开boot工程中的package.json "dependencies"中添加 "lodash-es": "4.17.21" "devDependencies"中添加 "@types/lodash-es": "4.17.12" 在main.ts中删除 import '@kunlun/vue-mobile-base/dist/kunlun-vue-mobile-base.css'

    2024年7月17日
    2.2K00
  • [前端]平台内置的基类

    前端平台内置了多个基类,允许开发者通过继承的方式来实现字段、视图以及动作。以下是一些常见的基类: 视图基类 通用视图基类 BaseElementWidget BaseElementWidget 是所有视图的通用基类,无论是何种视图,都可以继承这个基类。它封装了一系列属性和API,帮助开发者更轻松地创建各种视图组件。 表单类型的视图基类 BaseElementObjectViewWidget BaseElementObjectViewWidget 是表单视图的基类,它是BaseElementWidget的扩展。这个基类内部自动处理请求发起,以及数据刷新等一系列操作。 表格类型的视图基类 BaseElementListViewWidget BaseElementListViewWidget 是表格视图的基类,同样也是基于BaseElementWidget的扩展。它内部处理自动请求发起和数据刷新等操作,与BaseElementObjectViewWidget类似。 字段基类 表单字段基类 FormFieldWidget FormFieldWidget 是表单字段的基类,它封装了一系列属性和API,用于简化表单字段的开发。 表格字段基类 BaseTableFieldWidget BaseTableFieldWidget 是表格字段的基类,它封装了一系列属性和API,有助于开发者更轻松地创建表格字段。 动作基类 服务端动作基类 ServerActionWidget 跳转动作基类 RouterViewActionWidget 跳转动作基类(打开抽屉) DrawerViewActionWidget 跳转动作基类(打开抽屉) DrawerViewActionWidget 通过使用这些基类,开发者可以提高代码的可重用性和可维护性,从而更高效地开发前端应用。这些基类旨在帮助开发者更轻松地构建功能丰富的应用程序。

    2023年11月15日
    1.5K00
  • 【前端】移动端工程结构最佳实践(v4/v5)

    阅读之前 你应该: 了解node与npm相关内容 了解lerna包管理工具的相关内容 官方文档 了解git仓库的相关内容 了解rollup的相关内容 工程结构包示例 Vue项目结构包下载-v4.7.xVue项目结构包下载-v5.2.x 工程结构详解 工程结构 ├── packages │   ├── kunlun-mobile-boot │   │   ├── package.json │   │   ├── public │   │   │   ├── favicon.ico │   │   │   └── index.html │   │   ├── src │   │   │   ├── main.ts │   │   │   └── shim-vue.d.ts │   │   ├── tsconfig.json │   │   └── vue.config.js │   ├── kunlun-module-mobile-demo │   │   ├── scripts │   │   │   ├── postpublish.js │   │   │   └── prepublish-only.js │   │   ├── src │   │   │   ├── index.ts │   │   │   └── shim-vue.d.ts │   │   ├── index.ts │   │   ├── package.json │   │   ├── rollup.config.js │   │   └── tsconfig.json │   └── kunlun-modules-mobile-demo │   ├── scripts │   │   ├── build.config.js │   │   ├── postpublish.js │   │   └── prepublish-only.js │   ├── packages │   │   ├── module-demo1 │   │   │   ├── index.ts │   │   │   ├── package.json │   │   │   ├── rollup.config.js │   │   │   └── src │   │   │   ├── index.ts │   │   │   └── shim-vue.d.ts │   │   ├── module-demo2 │   │   │   ├── index.ts │   │   │   ├── package.json │   │   │   ├── rollup.config.js │   │   │  …

    前端 2023年11月1日
    2.2K00
  • 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.8K00
  • 自定义字段组件如何处理vue组件内的表单校验

    介绍 本示例以字符串字段为业务场景,将输入框用element-plus的组件实现了一遍,vue组件内在onMounted生命周期内将ElForm表单实例通过ts组件内提供到props的setFormInstance方法设置到了ts组件的属性formInstance上,这样就可以在ts组件校验方法validator()触发的时候直接调用表单组件实例formInstance的校验方法validate() 适用场景 当前字段存储了动态表单的配置json,vue组件内自行实现了一套表单渲染逻辑,需要在vue组件和ts组件内同时触发校验 参考文档 element-plus表单组件文档 如何编写自定义字段组件的校验逻辑 示例代码 ts组件 import { BaseFieldWidget, FormStringFieldSingleWidget, isValidatorSuccess, ModelFieldType, SPI, ValidatorInfo, ViewType, Widget } from '@kunlun/dependencies'; import { FormInstance } from 'element-plus'; import MyFormStringField from './MyFormStringField.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String, widget: 'Input', model: 'resource.k2.Model0000000109', name: 'code', }) ) export class MyFormStringFieldWidget extends FormStringFieldSingleWidget { public initialize(props) { super.initialize(props); this.setComponent(MyFormStringField); return this; } /** * ElementPlus的表单vue组件实例 * @private */ private formInstance?: FormInstance; @Widget.Method() private setFormInstance(formInstance: FormInstance | undefined) { this.formInstance = formInstance; } /** * 字段校验方法 */ public async validator(): Promise<ValidatorInfo> { const validRes = await this.formInstance?.validate((valid, fields) => {}); console.log('validRes', validRes) if (!validRes) { return this.validatorError('校验失败'); } const res = await super.validator(); if (!isValidatorSuccess(res)) { return res; } if (this.value == null) { return this.validatorSuccess(); } return this.validateLength(this.value); } } vue组件 <template> <ElForm ref="formInstance" :model="model" :rules="rules"> <ElFormItem label="编码" prop="code"> <ElInput v-model="model.code" @input="onValueChange"></ElInput> </ElFormItem> </ElForm> </template> <script lang="ts"> import { defineComponent, reactive, ref, onMounted, watch } from 'vue'; import { ElForm, ElFormItem, ElInput, FormInstance } from 'element-plus'; export default defineComponent({ name: 'MyFormStringField', components: { ElForm, ElFormItem, ElInput }, props: ['value', 'setFormInstance', 'onChange'],…

    2024年9月6日
    2.2K00

Leave a Reply

Please Login to Comment