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

最新推荐文章于 2025-04-18 20:00:00 发布

前端李小白

最新推荐文章于 2025-04-18 20:00:00 发布

阅读量1.6k

点赞数

分类专栏：微前端 vue 文章标签： qiankun

本文链接：https://blog.youkuaiyun.com/qq_42268364/article/details/119519833

版权

本文档介绍了在Vue项目中使用qiankun进行微前端部署的详细步骤，包括设置主应用和微应用的publicPath、history模式的路由base，以及统一身份认证的配置。特别强调了部署时的注意事项，如activeRule与微应用访问路径的关系，entry的正确设置，并提供了部分关键代码示例和Nginx配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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')

最低0.47元/天解锁文章