环境配置
前端环境配置包含.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：仅允许
ERROR、WARN、INFO、SUCCESS级别的消息通知。 - INFO：仅允许
ERROR、WARN、INFO级别的消息通知。 - WARN：仅允许
ERROR、WARN级别的消息通知。 - 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低代码应用平台体验
![[前端]平台内置的基类](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
