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不要和主应用的根路由一样,不然主应用刷新会激活子应用丢失数据

vue项目qiankun框架主应用和子应用用nginx部署_第1张图片

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

vue项目qiankun框架主应用和子应用用nginx部署_第2张图片

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

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

你可能感兴趣的:(vue.js,nginx,javascript)