在vue项目上使用阿里qiankun ——项目部署篇（三）

qiankun官方文档部署教程

官方文档写的也挺详细的，这里我主要以统一身份认证与盐田综管部署举例说明，我部署的服务器地址http://192.168.8.27:8077

首先要注意的是，我们主应用和子应用都是使用history模式，路由记得设置base，vue.config.js也要记得设置publicPath。

引用文档的原话：
部署之后注意三点：
1、activeRule不能和微应用的真实访问路径一样，否则在主应用页面刷新会直接变成微应用页面。
2、微应用的真实访问路径就是微应用的entry，entry可以为相对路径。
3、微应用的entry路径最后面的/不可省略，否则publicPath会设置错误，例如子项的访问路径是http://192.168.8.27:8066/udisp-web,那么entry就是http://192.168.8.27:8066/udisp-web/

1、设置主应用、微应用构建时的publicPath和history模式的路由base

正常情况下单独分别访问这两个系统

代码具体设置如下：

2、修改子应用盐田综管：

路由base:

const activePath = process.env.NODE_ENV === 'development' ? `/${
     systemEnName}/` : `/udaam-ui/${
     systemEnName}/`
const createRouter = () => new VueRouter({
   
  base: window.__POWERED_BY_QIANKUN__ ? activePath : process.env.BASE_URL,
  mode: 'history',
  routes: qiankunRoutes
})

systemEnName 就是系统的英文名称，也是主应用激活子应用的地址，生产环境需要加上/udaam-ui/，因为统一身份认证的publicPath就是/udaam-ui/

vue.config.js

module.exports = {
   
  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/udisp-web/',
   chainWebpack(config) {
   
    config.module.rule