部署也是根据不同的路由模式进行不同情况部署

假设主应用和子应用使用相同模式的路由

不是说使用不同路由不行，而是没那个必要去增加复杂性

我们以本机模拟服务器部署情况

1.png

如上图，我打包好了两份代码，分别位于deploy和deployhash文件夹

deploy文件夹内放置的是history模式的产物

deployhash文件夹内放置的是hash模式的产物

两个文件夹内的文件结构是一模一样的，这个图我们叫它图1，等哈记得回头来看

---

---我是分割线----

如果选择history模式，子应用需要修改publicPath和routerBasePath，这个不要忘记了

// vue.config.js
{
    publicPath: process.env.NODE_ENV === 'production' ? `/subapps/${packageName}` : '/',
}

// router.js
const setupRouter = () => createRouter({
  // routeBasePath是我在主应用传递下来的，这里就省略不写了，总之routerBasePath记得写就行了
  history: createWebHistory(routeBasePath || process.env.BASE_URL),
  routes,
});

---我是分割线----

---

接下来，我们配置nginx

分别做出两种配置（是的，发现没有，他两除了try_files其实一模一样）

    # history应用
    server {
        listen 7777;
        server_name  localhost;
        # 主应用
        location / {
            root /Users/xing.wu/Desktop/deploy/main; 
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        # 子应用
        location /subapps {
            root /Users/xing.wu/Desktop/deploy; 
            try_files $uri $uri/ /index.html;
        }
    }
    # hash应用
    server {
        listen 9999;
        server_name  localhost;
        # 主应用
        location / {
            root /Users/xing.wu/Desktop/deployhash/main; 
            index index.html index.htm;
        }
        # 子应用
        location /subapps {
            root /Users/xing.wu/Desktop/deployhash;
            index index.html index.htm;
        }
    }

接着我们配置需要加载的子应用入口

我是把入口写在了vue的mode文件中区分加载环境

所以这里我就直接写关键的环境文件内容了

（其实两种路由的history配置文件也可以相同，无非是nginx配置了默认访问文件index.html，history可以少写一个index.html）

history

VUE_APP_SUB_LOGIN=/subapps/sub-login/
VUE_APP_SUB_DOCTOR_MANAGE=/subapps/sub-doctor-manage/
VUE_APP_SUB_DEPARTMENT_SIGN_MANAGE=/subapps/sub-department-sign-manage/
VUE_APP_SUB_BASIC_INFO_MANAGE=/subapps/sub-basic-info-manage/
VUE_APP_SUB_NETWORK_MANAGE=/subapps/sub-network-manage/
VUE_APP_SUB_SIGNATURE_MANAGE=/subapps/sub-signature-manage/
VUE_APP_SUB_USER_MANAGE=/subapps/sub-user-manage/

hash

VUE_APP_SUB_LOGIN=/subapps/sub-login/index.html
VUE_APP_SUB_DOCTOR_MANAGE=/subapps/sub-doctor-manage/index.html
VUE_APP_SUB_DEPARTMENT_SIGN_MANAGE=/subapps/sub-department-sign-manage/index.html
VUE_APP_SUB_BASIC_INFO_MANAGE=/subapps/sub-basic-info-manage/index.html
VUE_APP_SUB_NETWORK_MANAGE=/subapps/sub-network-manage/index.html
VUE_APP_SUB_SIGNATURE_MANAGE=/subapps/sub-signature-manage/index.html
VUE_APP_SUB_USER_MANAGE=/subapps/sub-user-manage/index.html

我们分开解析一下这两份配置

如果对nginx的基本配置不太熟悉的可以查看无星的nginx配置学习（一）-基础配置和无星的nginx配置学习（二）——Vue router history配置引发的思考

history

1.nginx配置

首先，我们需要配置加载主应用

        location / {
            root /Users/xing.wu/Desktop/deploy/main; 
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

我们访问域名http://localhost:7777/等于访问/Users/xing.wu/Desktop/deploy/main/

且默认访问访问文件index.html

因此，我们访问http://localhost:7777/就等于访问了主应用/Users/xing.wu/Desktop/deploy/main/index.html

其次，我们需要配置加载子应用

        location /subapps {
            root /Users/xing.wu/Desktop/deploy; 
            try_files $uri $uri/ /index.html;
        }

举个例子，我们访问SUB_LOGIN这个子应用，从上述的描述文件可以得到
VUE_APP_SUB_LOGIN的入口地址为/subapps/sub-login/

因此，在项目中，加载SUB_LOGIN这个子应用应当访问的地址为http://localhost:7777/subapps/sub-login/

从nginx看我们配置的结果，访问http://localhost:7777/subapps/sub-login/ 等于 /Users/xing.wu/Desktop/deploy/subapps/sub-login/index.html

翻到图一看一下路径，就能发现，一切都对上了

效果如下

2.png

2.hash

1.nginx配置

一样，先是主应用

        location / {
            root /Users/xing.wu/Desktop/deployhash/main; 
            index index.html index.htm;
        }

访问http://localhost:9999/就等于访问了主应用/Users/xing.wu/Desktop/deployhash/main/index.html

再是子应用

        location /subapps {
            root /Users/xing.wu/Desktop/deployhash;
            index index.html index.htm;
        }

访问http://localhost:9999/subapps/sub-login/ 等于 /Users/xing.wu/Desktop/deployhash/subapps/sub-login/index.html

3.png

截图是特意截了别的资源的，因为会预加载其他模块资源，这里的index.html代表了所有模块的index.html

参考

微前端qiankun从搭建到部署的实践