在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('fonts').use('url-loader').loader('url-loader').options({}).end()
    config.module.rule('images').use('url-loader').loader('url-loader').options({}).end()
  }
}

config.module.rule('fonts').use('url-loader').loader('url-loader').options({}).end()    config.module.rule('images').use('url-loader').loader('url-loader').options({}).end()

3、修改主应用统一身份认证

修改注册函数

const isProduction = process.env.NODE_ENV === 'production'

const activeRule = isProduction ? `${process.env.BASE_URL}ytzg` : '/ytzg'
const entry = isProduction ? '/udisp-web/' : 'http://192.168.8.27:8066/'

const apps = [
  {
    name: 'ytzg', // 必选，微应用的名称，微应用之间必须确保唯一
    entry, // - 必选，微应用的入口
    container: '#appContainer', // -必选，微应用的容器节点的选择器或者 Element 实例
    activeRule, // - 必选，微应用的激活规则
    props: { // - 可选，主应用需要传递给微应用的数据。
      msg: '我是父应用传过来的值，传递给udisp应用',
      routerBase: '/ytzg', // 下发基础路由
      getGlobalState: share.getGlobalState, // 下发getGlobalState方法
      distinctSource: share.distinctSource, // 下发distinctSource方法
      ...share
    }
  }
]

这里注意看activeRule和entry的使用方式即可，生产环境activeRule需要加上主应用的 publicPath，也就是process.env.BASE_URL，生产环境entry就是子应用的publicPath，开发环境entry设置成你本地跑子应用的地址即可。

然后就nginx的配置了，我就直接贴代码展示了

子应用盐田综管

 server {
       listen       8066;
       server_name  cbsm;

       charset utf-8;

   
        location /udisp-web {
           root   html;
           index  index.html index.htm;
           try_files $uri $uri/ /udisp-web/index.html;
        #    add_header Access-Control-Allow-Origin *;   # 全局变量获得当前请求origin，带cookie的请求不支持*
        #    add_header "Access-Control-Allow-Methods" "*";  # 允许请求方法
        #    add_header "Access-Control-Allow-Headers" "*";  # 允许请求的 header
        if ($request_filename ~* .*\.(js|css|woff|png|jpg|jpeg)$)
    			{
        			expires    100d;  #js、css、图片缓存100天
        			#add_header Cache-Control "max-age = 8640000"; #或者设置max-age
    			}
               if ($request_filename ~* .*\.(?:htm|html)$)
            	{
            		add_header Cache-Control "no-cache, no-store";  #html不缓存
        		}
       }

    
	    #解决跨域问题
        location /udisp {
            proxy_pass   http://192.168.13.157:9802;
       }
    }

主应用统一身份认证

   server {
       listen       8077;
       server_name  cbsm;

       charset utf-8;

        location /udaam-ui{
           root   html;
           index  index.html index.htm;
           try_files $uri $uri/ /udaam-ui/index.html;
          
                  if ($request_filename ~* .*\.(js|css|woff|png|jpg|jpeg)$)
    			{
        			expires    100d;  #js、css、图片缓存100天
        			#add_header Cache-Control "max-age = 8640000"; #或者设置max-age
    			}
               if ($request_filename ~* .*\.(?:htm|html)$)
            	{
            		add_header Cache-Control "no-cache, no-store";  #html不缓存
        		}
           
       }
    
	    #解决跨域问题
        location /sys/auth {
            proxy_pass   http://192.168.8.54:8765/auth;
       }
         location /udaam-ui/sys/authorization {
            proxy_pass   http://192.168.8.54:8765/authorization;
       }
           location /sys/authorization {
            proxy_pass   http://192.168.8.54:8765/authorization;
       }
        location /sys {
            proxy_pass   http://192.168.8.54:8765/sys;
       }
       
        location /udisp-web/ {
            proxy_pass   http://192.168.8.27:8066/udisp-web/;
       }

           location /udisp {
            proxy_pass   http://192.168.8.54:8765;
       }
    }

其实主要的操作就是在主应用代理子应用的entry

把子应用盐田综管的entry /udisp-web/代理到http://192.168.8.27:8066/udisp-web/

然后正常访问项目即可。