qiankun 部署微前端-vue2 （二）

对于基本的部署问题，也可以去官网查找答案：

常见问题 - qiankun

这里主要记录在部署过程中遇到的问题

一、路由权限问题

无论主应用路由还是子应用中的路由，都会涉及权限问题，并不是每个路由路径对任何角色都是可见，所以我们在主应用 mian.js 中一般会加入（引入相关权限js，如permission.js）路由守卫（路由权限）。

思考一下，我们在主应用中添加/subapp 来访问子应用，但是这个并不是我们主应用定义路由中任何情况。

        所以我们需要在路由守卫 router.beforeEach 中添加对子应用中情况添加判断，我这里对子应用的路由直接next();

        

        如果此处不做修改，则会进入不到子应用的界面。

二、子应用调用接口地址代理不起作用。

         在子应用中，调用后端地址是在vue.config.js 进行代理配置，但是如果在主应用中访问的时候，此时代理是不走子应用的  devServer中proxy，这时候需要在主应用中添加对子应用相关代理。在添加之前，需要对子应用request请求添加判断配置。

在封装axios 请求方法中对访问模式添加判断，对非独立运行添加前缀，方便在主应用中代理配置中进行识别标识。

         在主应用中vue.config.js

devServer: {
    host: "",
    port: port,
    open: true,
    proxy: {
        // 访问子应用接口代理的地址
      ['/subapp'+process.env.VUE_APP_BASE_API]: {
        target: `http://1.1.1.1:7070`,
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          ["^/subapp" + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API,
        },
      },
          // 主应用运行代理地址
      [process.env.VUE_APP_BASE_API]: {
        target: `http://1.1.1.2:6070`,
        changeOrigin: true,
        logLevel: 'debug',
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: process.env.VUE_APP_BASE_API,
        },
      },
      
    },
    disableHostCheck: true,
  },

      以上是开发模式下配置，生产模式也是如此。  

 自此就可以实现微应用主应用访问相关子应用的内容了，包含权限，接口服务等内容的畅通无阻了。