qiankun整合vue过程

从本地整合到nginx线上部署过程

明天赚到五百万

3029人浏览 · 2021-11-17 18:43:29

明天赚到五百万 · 2021-11-17 18:43:29 发布

1.vue项目中安装乾坤

$ yarn add qiankun # 或者 npm i qiankun -S

2.在主应用router文件夹中新建micro-frontend.js文件，在此文件中注册微应用

import Layout from '@/layout'

export const apps = [

{

name: 'vue-child-rbac',

// entry: '//localhost:9527', //本地运行，值为子应用启动的端口，这是子应用的入口

entry: '//localhost/child/vue-rbac/', // 部署

container: '#content', //子应用在主应用中挂载的容器，在容器标签内命名id="content"

activeRule: '/app-rbac' //子应用匹配的路由规则，与点击事件跳转的目标路径一致

}

]

const microChildRouters = []

apps.forEach((item) => {

const obj = {

path: `${item.activeRule}:catchAll(.*)`,

name: item.name,

component: () => import('@/views/Micro.vue')

}

microChildRouters.push(obj)

})

export const microRouter = [

{

path: `/micro`,

name: 'micro',

component: Layout,

// redirect: apps[0].activeRule,

children: microChildRouters

}

]

export default microRouter

3.新建plugins文件夹，在里面新建qiankun.js文件，内容如下

import { registerMicroApps, setDefaultMountApp } from 'qiankun'

import { apps } from '@/router/micro-frontend.js'

const _apps = []

apps.forEach(item => {

_apps.push({

name: item.name,

entry: item.entry,

container: item.container,

activeRule: getActiveRule(item.activeRule)

})

})

export default () => {

registerMicroApps(_apps)

setDefaultMountApp(apps[0].activeRule)

}

function getActiveRule(routerPrefix) {

return location => location.pathname.startsWith(routerPrefix)

}

4.在views文件夹中新建micro.vue，在此启动qiankun

<template>

  <div />

</template>



<script>

import { start } from 'qiankun';



export default {

  mounted() {

    if (!window.qiankunStarted) {

      window.qiankunStarted = true;

      start();

    }

  }

}

</script>

5.在主应用main.js文件中引入

import initQiankun from './plugins/qiankun'

至此，主应用配置完成，下面看看子应用vue-rbac

子应用无需导入任何依赖即可接入qiankun，有 webpack 的微应用（主要是指 Vue、React、Angular）需要做的事情有：

新增 public-path.js 文件，用于修改运行时的 publicPath。什么是运行时的 publicPath ？（俺也不懂，跟着做就好了）
微应用建议使用 history 模式的路由，需要设置路由 base，值和它的 activeRule 是一样的。
在入口文件最顶部引入 public-path.js，修改并导出三个生命周期函数。
修改 webpack 打包，允许开发环境跨域和 umd 打包。

1.子应用src目录下新增public-path.js，并在main.js中引入，内容如下

if (window.__POWERED_BY_QIANKUN__) {

// eslint-disable-next-line no-undef

__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__

}

2.在构造路由实例时，设置路由base

const createRouter = () => new Router({

mode: 'history', // require service support

base: window.__POWERED_BY_QIANKUN__ ? '/app-rbac/' : '/child/vue-rbac/',

//这里base的值需要与主项目中的activeRule值对应，也就是/app-rbac/

scrollBehavior: () => ({ y: 0 }),

routes: constantRoutes

})

3.子应用main.js中导入刚刚新建的js文件，并暴露出几个生命周期函数供给主应用调用

import './public-path'

function render(props = {}) {

const { container } = props

instance = new Vue({

router,

store,

i18n,

render: (h) => h(App)

}).$mount(container ? container.querySelector('#app') : '#app')

}

if (!window.__POWERED_BY_QIANKUN__) {

render()

} //子应用项目独立运行

export async function bootstrap() {

console.log('[vue] vue app bootstraped')

}

//各个生命周期函数

export async function mount(props) {

// console.log('[vue] props from main framework', props)

actions.setActions(props)

render(props)

}

export async function unmount() {

instance.$destroy()

instance.$el.innerHTML = ''

instance = null

}

export async function update(props) {

console.log('update props', props)

}

4.在vue.config.js文件中增加如下内容

const packageName = require('./package.json').name

module.exports = {

devServer: {

headers: {

'Access-Control-Allow-Origin': '*',

},

},

configureWebpack: {

output: {

library: `${name}-[name]`,

libraryTarget: 'umd', // 把微应用打包成 umd 库格式

jsonpFunction: `webpackJsonp_${packageName}`,

},

},

};

完成上面的配置后，乾坤已经可以在本地运行了，主应用跳转的路径记得要与activeRule的值一致

<el-menu-item index="/app-rbac">

RBAC&BPM

</el-menu-item>

若想要在nginx上部署，需要做一些配置上的更改，这里将主应用和微应用部署到同一个服务器（同一个 IP 和端口）

必须配置 webpack 构建时的 publicPath 为目录名称，
history 路由的微应用需要设置 base ，值为目录名称，用于独立访问时使用。

部署之后注意三点：

activeRule 不能和微应用的真实访问路径一样，否则在主应用页面刷新会直接变成微应用页面。
微应用的真实访问路径就是微应用的 entry，entry 可以为相对路径。
微应用的 entry 路径最后面的 / 不可省略，否则 publicPath 会设置错误，例如子项的访问路径是 http://localhost:8080/app1,那么 entry 就是 http://localhost:8080/app1/。

最后在nginx中的目录是这样的，注意对比好，结构要一模一样

└── html/ # 根文件夹

├── child/ # 存放所有微应用的文件夹

| ├── vue-rbac/ # 存放微应用 vue-rbac的文件夹

├── index.html # 主应用的index.html

├── css/ # 主应用的css文件夹

├── js/ # 主应用的js文件夹

1.先来配置一下主应用和子应用的`publicPath`

publicPath: process.env.NODE_ENV === 'development' ? '/' : '/', //主应用

publicPath: process.env.NODE_ENV === 'development' ? '/' : '/child/vue-rbac/', //子应用，这里的值对应的就是nginx中子应用的地址，命名要与自己的项目对应起来。

2.子应用的路由base，刚刚已经设置过了，在router构造实例时

base: window.__POWERED_BY_QIANKUN__ ? '/app-rbac/' : '/child/vue-rbac/',

3.再回头看看主应用注册子应用时的更改

export const apps = [

{

name: 'vue-child-rbac',

// entry: '//localhost:9527', //本地运行

entry: '//localhost/child/vue-rbac/', // 部署时只有一个端口，入口是子应用所在位置，最后的/不要省略

container: '#content',

activeRule: '/app-rbac'

}

]

在浏览器中输入localhost/ 最后的/不要省略！

至此主应用已经和微应用都能跑起来了，但是主应用和 vue-history、react-history、angular-history 微应用是 history 路由，需要解决刷新 404 的问题，nginx 还需要配置一下：

server {

listen 8080;

server_name localhost;

location / {

root html;

index index.html index.htm;

try_files $uri $uri/ /index.html;

}

location /child/vue-history {

root html;

index index.html index.htm;

try_files $uri $uri/ /child/vue-history/index.html;

}

# angular 和 react 的history 配置同上

}

好了结束了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^