vue项目qiankun框架主应用和子应用用nginx部署,路由前缀，生产环境打包

主应用 打包工具是vite

子应用 打包工具是vue cli

主应用和子应用部署在一个服务器端口下

注意点

主应用的vite.prod.config.ts配置文件的base字段，这个字段和nginx部署的文件结构有关，base表示打包后的主应用文件放到服务器的哪个文件夹中，默认是base:"/" ,默认将主应用文件放在服务器的根目录中

在main.ts中注册子应用时的配置对象

entry字段是nginx服务器中子应用文件存放的地址。

完整url路径是http://localhost:80/child/homepage/

activeRule字段是子应用激活规则，和子应用的vue-router的基础路由有关系

当子应用的基础路由是/homepage时，那么子应用的路由表的所有path字段的前缀就是/homepage

path:"/index" 变成 path:"/homepage/index"

当location的地址栏发生变化，变成"/homepage开头的地址时，就会激活子应用

注意activeRule不要和主应用的根路由一样，不然主应用刷新会激活子应用丢失数据

 在子应用的路由文件中，设置基础路由，这个基础路由要和主应用配置的activeRule一样，这样才能激活子应用

 在子应用的vue.config.js配置文件中，publicpath字段在打包时是必须要配的

publicpath表示打包后的静态资源文件加载路径的前缀。浏览器访问index.html中静态资源时通过这个前缀拿到资源js,css,图片

<script src:http:localhost:80/child/homepage/js>

最后是配置nginx服务器

先把文件结构写好

主应用和child是同一级

子应用homepage在child里面

 

 然后nginx的conf配置文件，设置跨域，设置接口请求

然后安装qiankun官网给的location复制

将主应用和子应用打包后的dist文件放到nginx中就好了

注意每次修改nginx的conf文件都有rload一下

这样主应用和子应用都部署好了，主应用和子应用都是history模式。主应用刷新也不报404的错了

nginx的try_files已经配置好了重定向的路径