【文件属性】:
文件名称:qiankun-micro-app:qiankun 微前端应用实践与部署
文件大小:503KB
文件格式:ZIP
更新时间:2021-05-14 13:33:29
qiankun qiankun-vue-demo JavaScript
qiankun 微前端应用实践与部署
微前端应用分为主应用与子应用,部署方式是分别编译好主应用与子应用,将主应用与子应用部署到 nginx 配置好的目录即可。
代码仓库
分别进入 portal、app1、app2 根目录,执行:
开发模式
# portal
yarn
yarn start
# app1、app2
npm install
npm run dev
生产模式
# portal
yarn build
# app1、app2
npm run build
主应用
主应用 js 文件引入 qiankun 注册子应用,并编写导航页显示跳转逻辑。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>QianKun Example</title>
</head>
<body>
<div cla
【文件预览】:
qiankun-micro-app-master
----.gitignore(219B)
----app1()
--------.gitignore(214B)
--------package.json(665B)
--------src()
--------public()
--------.env(70B)
--------README.md(3KB)
--------.rescriptsrc.js(597B)
--------yarn.lock(508KB)
----app2()
--------.gitignore(214B)
--------package.json(465B)
--------src()
--------postcss.config.js(62B)
--------.browserslistrc(21B)
--------README.md(367B)
--------vue.config.js(1KB)
--------babel.config.js(67B)
--------yarn.lock(330KB)
----portal()
--------.gitignore(219B)
--------package.json(722B)
--------render()
--------public()
--------index.js(4KB)
--------multiple.js(377B)
--------multiple.html(414B)
--------index.html(561B)
--------index.less(2KB)
--------yarn.lock(230KB)
----README.md(11KB)