mirror of
https://gitee.com/WeBank/fes.js.git
synced 2024-12-16 02:20:52 +08:00
184 lines
4.0 KiB
Markdown
184 lines
4.0 KiB
Markdown
# 运行时配置
|
||
|
||
Fes.js 约定 `src/app.js` 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端，因此我们可以在这里写函数、引入浏览器端依赖项等等，注意不要引入 node 端依赖项。
|
||
|
||
## 运行时为啥需要配置？
|
||
|
||
Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件，而 Fes.js 中 entry 文件由框架生成，用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。
|
||
|
||
例如：
|
||
|
||
plugin-acess插件定义运行时配置项：
|
||
```js
|
||
api.addRuntimePluginKey(() => 'access');
|
||
```
|
||
plugin-acess插件读取配置项：
|
||
```js
|
||
const runtimeConfig = plugin.applyPlugins({
|
||
key: 'access',
|
||
type: ApplyPluginsType.modify,
|
||
initialValue: {}
|
||
});
|
||
```
|
||
|
||
而用户则只需要配置：
|
||
```js
|
||
// app.js
|
||
export const access = memo => ({
|
||
...memo
|
||
unAccessHandler({
|
||
router, to, from, next
|
||
}) {
|
||
// 处理逻辑
|
||
},
|
||
noFoundHandler({
|
||
router, to, from, next
|
||
}) {
|
||
// 处理逻辑
|
||
},
|
||
});
|
||
|
||
```
|
||
|
||
## 配置项
|
||
|
||
### beforeRender
|
||
|
||
beforeRender(lastOpts)
|
||
|
||
在渲染之前执行，执行`action`过程中显示 `loading` 配置的组件，执行结果作为参数 `initialState` 传给 `modifyClientRenderOpts`。
|
||
|
||
示例：
|
||
```js
|
||
// app.js
|
||
import { access } from '@fesjs/fes';
|
||
import PageLoading from '@/components/PageLoading';
|
||
import UserCenter from '@/components/UserCenter';
|
||
|
||
export function beforeRender(lastOpts) {
|
||
return {
|
||
...lastOpts,
|
||
loading: <PageLoading />,
|
||
action() {
|
||
const { setRole } = access;
|
||
return new Promise((resolve) => {
|
||
setTimeout(() => {
|
||
setRole('admin');
|
||
resolve({
|
||
userName: 'harrywan'
|
||
});
|
||
}, 1000);
|
||
});
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
### patchRoutes
|
||
|
||
patchRoutes({routes })
|
||
|
||
|
||
修改路由。
|
||
|
||
比如在最前面添加一个 /foo 路由：
|
||
```
|
||
export function patchRoutes({ routes }) {
|
||
routes.unshift({
|
||
path: '/foo',
|
||
component: require('@/extraRoutes/foo').default,
|
||
});
|
||
}
|
||
```
|
||
:::tip
|
||
直接修改 `routes`, 不需要返回
|
||
:::
|
||
|
||
### modifyClientRenderOpts
|
||
|
||
modifyClientRenderOpts(lastOpts)
|
||
|
||
修改 `clientRender` 参数。参数是一个对象：
|
||
- routes，路由配置信息
|
||
- rootElement， 渲染的根节点，默认是 `#app`，可通过配置 `mountElementId` 修改。
|
||
- initialState， 初始化数据，`beforeRender` 运行得到的数据。
|
||
|
||
比如在微前端里动态修改渲染根节点：
|
||
```js
|
||
let isSubApp = false;
|
||
export function modifyClientRenderOpts(lastOpts) {
|
||
return {
|
||
...lastOpts,
|
||
rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement,
|
||
};
|
||
}
|
||
```
|
||
|
||
### rootContainer
|
||
|
||
rootContainer(LastRootContainer, args)
|
||
|
||
修改交给 Vue 渲染时的根组件，默认是 `<RouterView></RouterView>`。
|
||
|
||
- LastRootContainer，上一个插件修改后的结果。
|
||
- args，包含：
|
||
- routes，全量路由配置
|
||
- plugin，运行时插件机制
|
||
|
||
比如在可以包一层DIV：
|
||
```js
|
||
export function rootContainer(container) {
|
||
return () => {
|
||
return (
|
||
<div>
|
||
<RouterView></RouterView>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
```
|
||
|
||
### onAppCreated
|
||
|
||
onAppCreated({app})
|
||
|
||
创建 app 实例后触发。
|
||
|
||
比如用于安装 Vue 插件：
|
||
```js
|
||
import { createRouter } from "vue-router";
|
||
|
||
export function onAppCreated({ app }) {
|
||
const router = createRouter();
|
||
app.use(router);
|
||
}
|
||
|
||
```
|
||
|
||
### render
|
||
|
||
render(oldRender: Function)
|
||
|
||
覆写 render。
|
||
|
||
比如用于渲染之前做权限校验。
|
||
|
||
|
||
|
||
### onRouterCreated
|
||
|
||
onRouterCreated({router})
|
||
|
||
生成router时触发。
|
||
|
||
比如用于收集切换路由的记录：
|
||
```js
|
||
export function onRouterCreated({ router }) {
|
||
router.afterEach((to, from) => {
|
||
console.log(to)
|
||
});
|
||
}
|
||
```
|
||
|
||
## 更多配置项
|
||
Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。 |