📝 add some frequently questions to the FAQ (umijs#948)

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')`.
 

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')`。
 

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()
+  },
+}
+```

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()
+  },
+}
+```