qiankun微前端框架部署

1. 介绍

​ 许多问题在qiankun官网都能找到，疑难杂症也可以通过GitHub中的issue找到四面八方码友的臭味相投。

​ 同样可以去各大IT社区寻找答案，这里就分享我个人踩过的坑。

​ 我这以Vue项目示例，在主应用和微应用部署到同一个服务器（同一个 IP 和端口）打包情况如下

• main：主应用（main文件夹我放在根路径下）例如：http://localhost:8080/mian
  • children：子应用文件夹
    • boy：子应用1
    • girl：子应用2

2. 主应用和子应用的配置准备

2.1 子应用配置——boy应用

2.1.1 router配置

base应用的基路径，VueRouter官网

const router = new VueRouter({
  mode: "history",
  base: window.__POWERED_BY_QIANKUN__
    ? "/main/boy/"
    : "/main/children/boy/",
  routes,
});

/main/boy/：和register配置的activeRule一致

/main/children/boy/：打包后基于根路径的项目文件存放位置

2.1.2 vue.config.js

publicPath文件打包资源配置，publicPath vue-cli官方说明

publicPath: process.env.NODE_ENV === 'production'
  ? "/main/children/boy/" : "/",

​ 和router的base类似，二者差异点击跳转可查看这个文章

​ 由于publicPath是打包配置，在本地时用的是devServer基于项目的打包服务，所以文件默认都一般都打包在localhost服务下，就写一个 / 斜杠就行，因为在本目录路径下。

​ 然而在打包部署要考虑的线上服务器，项目文件存放目录，所以需要基于基于根路径的项目文件存放位置，根据我给出的截图，可以看出放在 /main/children/boy/路径下。

2.1.3 webpack.config.js文件资源打包配置

主要是对于字体文件、图片资源的打包，防止微应用出现404问题，qiankun官网

const port = 9009
const publicPath = process.env.NODE_ENV === 'production' ? 'http://域名/main/children/boy/' : `http://localhost:${port}`;

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        use: [
          {
            loader: "url-loader",
            options: {},
            fallback: {
              loader: "file-loader",
              options: {
                name: "img/[name].[hash:8].[ext]",
                publicPath,
              },
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)$/i,
        use: [
          {
            loader: "url-loader",
            options: {},
            fallback: {
              loader: "file-loader",
              options: {
                name: "fonts/[name].[hash:8].[ext]",
                publicPath,
              },
            },
          },
        ],
      },
    ],
  },
};

2.1.4 assets文件夹

静态资源文件夹不会被打包，直接放在public文件夹下即可，打包会将其汇总。

2.2 主应用配置——main应用

​ 主应用只需要更改registerMicroApps传来的appsList中的配置即可，把原先填写的服务器地址，替换成对应资源路径就行。

import { registerMicroApps } from "qiankun"
export const appsList = [
  {
    name: "boy",
    entry: process.env.NODE_ENV === "production" ? "/main/children/boy/" : "//localhost:9005", 
    container: "#mainContent",
    activeRule: "/main/boy"
  },
  {
    name: "girl",
    entry: process.env.NODE_ENV === "production" ? "/main/children/girl/" : "//localhost:9009", 
    container: "#mainContent",
    activeRule: "/main/girl"
  },
]

registerMicroApps(appsList)

2.3 nginx配置

server {
    # 基础配置
    ... 
    
    location ^~ /main {
        alias /main;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html last;
    }
    location /children/boy {
        alias /children/boy;
        index index.html;
        try_files $uri $uri/ /index.html last;
    }
    location /children/girl {
        alias /children/girl;
        index index.html;
        # 解决子应用刷新404问题
        try_files $uri $uri/ /index.html last;
    }
}

2.4 配置完成

3. 遇到的问题

3.1 文件资源请求路径不对

这种情况大概率是打包的路径配置问题，仔细查看 vue.config.js中的publicPath和router的base配置是否准确一致。

3.2 qiankun入口资源解析问题（Uncaught SyntaxError: Unexpected token ‘＜‘ ）

​ 静态资源assets文件夹没有放在public文件夹下，导致打包的时候没有合并进来，执行入口文件时找不到对应的资源文件。