diff --git a/docs/api/README.md b/docs/api/README.md index 3dfd7ff..7f15e55 100644 --- a/docs/api/README.md +++ b/docs/api/README.md @@ -26,7 +26,7 @@ By linking the micro-application to some url rules, the function of automaticall - name - `string` - required, the name of the child application and must be unique between the child applications. - entry - `string | { scripts?: string[]; styles?: string[]; html?: string }` - required, The entry of the micro application. - - If configured as `string`, it represents the access address of the micro application. If the micro application is deployed in a secondary directory, the last `/` cannot be omitted. For example, the access address of the micro application is: `https://qiankun.umijs.org/guide`, then the `entry` should be `https://qiankun.umijs.org/guide/`. + - If configured as `string`, it represents the access address of the micro application. such as `https://qiankun.umijs.org/guide/`. - If configured as `object`, the value of `html` is the html content string of the micro application, not the access address of the micro application. The `publicPath` of the micro application will be set to `/`. - container - `string | HTMLElement` - required,A selector or Element instance of the container node of a micro application. Such as `container: '#root'` or `container: document.querySelector('#root')`. diff --git a/docs/api/README.zh.md b/docs/api/README.zh.md index 3e90679..ed75bd1 100644 --- a/docs/api/README.zh.md +++ b/docs/api/README.zh.md @@ -26,7 +26,7 @@ toc: menu - name - `string` - 必选,微应用的名称,微应用之间必须确保唯一。 - entry - `string | { scripts?: string[]; styles?: string[]; html?: string }` - 必选,微应用的入口。 - - 配置为字符串时,表示微应用的访问地址。如果微应用部署在二级目录,则最后面的 `/` 不可省略。例如,微应用的访问地址是:`https://qiankun.umijs.org/guide`,那么 `entry` 应该是 `https://qiankun.umijs.org/guide/`。 + - 配置为字符串时,表示微应用的访问地址,例如 `https://qiankun.umijs.org/guide/`。 - 配置为对象时,`html` 的值是微应用的 html 内容字符串,而不是微应用的访问地址。微应用的 `publicPath` 将会被设置为 `/`。 - container - `string | HTMLElement` - 必选,微应用的容器节点的选择器或者 Element 实例。如`container: '#root'` 或 `container: document.querySelector('#root')`。 diff --git a/docs/faq/README.md b/docs/faq/README.md index fa4aede..a835fed 100644 --- a/docs/faq/README.md +++ b/docs/faq/README.md @@ -271,3 +271,69 @@ It is usually because you are routing in Browser mode, which requires the server Specific configuration mode reference: * [HTML5 History Mode](https://router.vuejs.org/guide/essentials/history-mode.html) * [browserRouter](https://reactrouter.com/web/api/BrowserRouter) + +## How to configure the 404 page in the main application? + +First of all, you cannot use the wildcard `*`. You can register the 404 page as a normal routing page, such as `/404`, and then judge in the routing hook function of the main project, if it is neither the main application routing nor the micro application , Then jump to the 404 page. + +Take `vue-router` as an example, the pseudo code is as follows: + +```js +const childrenPath = ['/app1','/app2']; +router.beforeEach((to, from, next) => { + if(to.name) {// There is a name attribute, indicating that it is the route of the main project + next() + } + if(childrenPath.some(item => to.path.includes(item))){ + next() + } + next({ name: '404' }) +}) +``` + +## How to jump between micro apps? + +-Both the main application and the micro application are in the `hash` mode. The main application judges the micro application based on the `hash`, so this issue is not considered. + +-The main application judges the micro application based on the `path` + + It is not possible to directly use the routing instance of the micro-application to jump between micro-applications in the `history` mode or to jump to the main application page. The reason is that the routing instance jumps of the micro-application are all based on the `base` of the route. There are two ways to jump: + + 1. `history.pushState()`: [mdn usage introduction](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState) + 2. Pass the routing instance of the main application to the micro application through `props`, and the micro application will jump to this routing instance. + + +## After the microapp file is updated, the old version of the file is still accessed + +The server needs to configure a response header for the `index.html` of the micro application: `Cache-Control no-cache`, which means to check whether it is updated every time it requests. + +Take `Nginx` as an example: + +``` +location = /index.html { + add_header Cache-Control no-cache; +} +``` + +## Font file loading error after micro application packaging + +The reason is that `qiankun` changed the external link style to the inline style, but the loading path of the font file is a relative path. + +Modify the `webpack` package and inject the path prefix to the font file: + +```js +module.exports = { + chainWebpack: (config) => { + config.module + .rule('fonts') + .test(/.(ttf|otf|eot|woff|woff2)$/) + .use('url-loader') + .loader('url-loader') + .tap(options => ({ + name:'/fonts/[name].[hash:8].[ext]', + limit: 4096, // Fonts smaller than 4KB will be packaged as base64 + })) + .end() + }, +} +``` \ No newline at end of file diff --git a/docs/faq/README.zh.md b/docs/faq/README.zh.md index 54641dd..e4f6bb9 100644 --- a/docs/faq/README.zh.md +++ b/docs/faq/README.zh.md @@ -341,3 +341,69 @@ qiankun 会将微应用的动态 script 加载(例如 JSONP)转化为 fetch 具体配置方式参考: * [HTML5 History 模式](https://router.vuejs.org/zh/guide/essentials/history-mode.html) * [browserHistory](https://react-guide.github.io/react-router-cn/docs/guides/basics/Histories.html#browserHistory) + +## 主应用如何配置404页面? + +首先不应该写通配符 `*` ,可以将 404 页面注册为一个普通路由页面,比如说 `/404` ,然后在主项目的路由钩子函数里面判断一下,如果既不是主应用路由,也不是微应用,就跳转到 404 页面。 + +以`vue-router`为例,伪代码如下: + +```js +const childrenPath = ['/app1','/app2']; +router.beforeEach((to, from, next) => { + if(to.name) { // 有 name 属性,说明是主项目的路由 + next() + } + if(childrenPath.some(item => to.path.includes(item))){ + next() + } + next({ name: '404' }) +}) +``` + +## 微应用之间如何跳转? + +- 主应用和微应用都是 `hash` 模式,主应用根据 `hash` 来判断微应用,则不用考虑这个问题。 + +- 主应用根据 `path` 来判断微应用 + + `history` 模式的微应用之间的跳转,或者微应用跳主应用页面,直接使用微应用的路由实例是不行的,原因是微应用的路由实例跳转都基于路由的 `base`。有两种办法可以跳转: + + 1. `history.pushState()`:[mdn用法介绍](https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState) + 2. 将主应用的路由实例通过 `props` 传给微应用,微应用这个路由实例跳转。 + + +## 微应用文件更新之后,访问的还是旧版文件 + +服务器需要给微应用的 `index.html` 配置一个响应头:`Cache-Control no-cache`,意思就是每次请求都检查是否更新。 + +以 `Nginx` 为例: + +``` +location = /index.html { + add_header Cache-Control no-cache; +} +``` + +## 微应用打包之后字体文件加载出错 + +原因是 `qiankun` 将外链样式改成了内联样式,但是字体文件的加载路径是相对路径。 + +修改一下 `webpack` 打包,给字体文件注入路径前缀即可: + +```js +module.exports = { + chainWebpack: (config) => { + config.module + .rule('fonts') + .test(/.(ttf|otf|eot|woff|woff2)$/) + .use('url-loader') + .loader('url-loader') + .tap(options => ({ + name: '/fonts/[name].[hash:8].[ext]', + limit: 4096, // 小于4KB的字体将会被打包成 base64 + })) + .end() + }, +} +``` \ No newline at end of file