📝 fix a few details (#1189)
Co-authored-by: gongshun <gongshun@gridsum.com>
This commit is contained in:
parent
006877c2d0
commit
9591a0d126
|
|
@ -55,7 +55,7 @@ Micro apps are divided into projects with `webpack` and without `webpack`. The t
|
|||
Note: `publicPath` at runtime and `publicPath` at build time are different, and the two cannot be equivalently substituted.
|
||||
</Alert>
|
||||
|
||||
2. The `history` route needs to set the route `base`, and the value is the same as its `activeRule`. At this time, the `hash` mode does not need to set the route `base` (when the `hash` is used to distinguish micro apps, the `hash` route only need to set the route `base`).
|
||||
2. It is recommended to use the route of the `history` mode for the micro app. The route `base` needs to be set, and the value is the same as its `activeRule`.
|
||||
3. Import `public-path.js` at the top of the entry file, modify and export three `lifecycles` functions.
|
||||
4. Modify the `webpack` configuration to allow cross-domain in development environments and bundle with `umd`.
|
||||
|
||||
|
|
@ -77,7 +77,6 @@ Take the `react 16` project generated by `create react app` as an example, with
|
|||
2. Set the `base` of `history` mode routing:
|
||||
|
||||
```html
|
||||
<!-- Not required for hash mode -->
|
||||
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/app-react' : '/'}>
|
||||
```
|
||||
|
||||
|
|
@ -189,7 +188,6 @@ Take the `vue 2.x` project generated by `vue-cli 3+` as an example, and add it a
|
|||
function render(props = {}) {
|
||||
const { container } = props;
|
||||
router = new VueRouter({
|
||||
// hash Mode does not need to set base
|
||||
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
|
||||
mode: 'history',
|
||||
routes,
|
||||
|
|
@ -202,7 +200,7 @@ Take the `vue 2.x` project generated by `vue-cli 3+` as an example, and add it a
|
|||
}).$mount(container ? container.querySelector('#app') : '#app');
|
||||
}
|
||||
|
||||
// standalone
|
||||
// when run independently
|
||||
if (!window.__POWERED_BY_QIANKUN__) {
|
||||
render();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ start();
|
|||
注意:运行时的 publicPath 和构建时的 publicPath 是不同的,两者不能等价替代。
|
||||
</Alert>
|
||||
|
||||
2. `history` 路由需要设置路由 `base`,值和它的 `activeRule` 是一样的,此时 `hash` 模式无需设置路由 `base`(当使用 `hash` 来区分微应用时,`hash` 路由才需要设置路由 `base`)。
|
||||
2. 子应用建议使用 `history` 模式的路由,需要设置路由 `base`,值和它的 `activeRule` 是一样的。
|
||||
3. 在入口文件最顶部引入 `public-path.js`,修改并导出三个生命周期函数。
|
||||
4. 修改 `webpack` 打包,允许开发环境跨域和 `umd` 打包。
|
||||
|
||||
|
|
@ -77,7 +77,6 @@ start();
|
|||
2. 设置 `history` 模式路由的 `base`:
|
||||
|
||||
```html
|
||||
<!-- hash 模式不需要 -->
|
||||
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/app-react' : '/'}>
|
||||
```
|
||||
|
||||
|
|
@ -94,16 +93,6 @@ start();
|
|||
ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
|
||||
}
|
||||
|
||||
function storeTest(props) {
|
||||
props.onGlobalStateChange((value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), true);
|
||||
props.setGlobalState({
|
||||
ignore: props.name,
|
||||
user: {
|
||||
name: props.name,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (!window.__POWERED_BY_QIANKUN__) {
|
||||
render({});
|
||||
}
|
||||
|
|
@ -114,7 +103,6 @@ start();
|
|||
|
||||
export async function mount(props) {
|
||||
console.log('[react16] props from main framework', props);
|
||||
storeTest(props);
|
||||
render(props);
|
||||
}
|
||||
|
||||
|
|
@ -200,7 +188,6 @@ start();
|
|||
function render(props = {}) {
|
||||
const { container } = props;
|
||||
router = new VueRouter({
|
||||
// hash 模式不需要设置 base
|
||||
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
|
||||
mode: 'history',
|
||||
routes,
|
||||
|
|
@ -218,27 +205,11 @@ start();
|
|||
render();
|
||||
}
|
||||
|
||||
function storeTest(props) {
|
||||
props.onGlobalStateChange &&
|
||||
props.onGlobalStateChange(
|
||||
(value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
|
||||
true,
|
||||
);
|
||||
props.setGlobalState &&
|
||||
props.setGlobalState({
|
||||
ignore: props.name,
|
||||
user: {
|
||||
name: props.name,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function bootstrap() {
|
||||
console.log('[vue] vue app bootstraped');
|
||||
}
|
||||
export async function mount(props) {
|
||||
console.log('[vue] props from main framework', props);
|
||||
storeTest(props); // 测试双向传递数据
|
||||
render(props);
|
||||
}
|
||||
export async function unmount() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user