4.基于qiankun的微应用示例（Vue及传统应用混合）一传统应用

准备环境
express
我们安装express，只是为了应用一下express的静态服务资源。随便安装一下...

npm i express -g

新建app.js

var express = require('express');
var path = require('path');
var app = express();
 

// app.all('', function(req, res, next) {
//   res.header("Access-Control-Allow-Origin", "*");
// });

var allowCors = function(req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin);
  res.header("Access-Control-Allow-Methods", "GET,POST,OPTIONS");
  res.header("Access-Control-Allow-Headers", "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X- 
  Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization");

  
  next();
}
app.use(allowCors)
app.use(express.static(path.join(__dirname, 'public')));

var server = app.listen(8082, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("应用实例，访问地址为 http://%s:%s", host, port)
})

新建 public文件夹

4.public文件夹下新建index.html

<!DOCTYPE html><!-- DTD文档类型声明为HTML5版本的格式 -->
<html lang="zh-CN"><!--指定为中文网站，主要避免触发谷歌浏览器翻译功能-->
<!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 字符编码写法 优于 html4.01的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
    <meta charset="UTF-8">
    <!-- 网站标题，最好在自己使用对应框架的路由拦截中每次设置不同的标题较好 -->
    <title>子应用2</title>
    <!-- 用于告诉搜索引擎，你网页的关键字，特别有用 -->

    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="sNMk592JV2wwHn6DPJ8C5oy/hHDnjIlZBOHyngtTbpQ=" />
    <style>
      .dfg{
        color: rgb(30, 20, 158)
      }
    </style>
</head>
<body class="dfg">
  <div class="dfg">
    子应用2
  </div>
</body>
  <script>
    // 生命周期 - 挂载前
    window.one = {}
    window.one.bootstrap = async function (props) {
      console.log('tow bootstrap');
    }
    // 生命周期 - 挂载后
    window.one.mount = async function () {
      console.log('tow mount');
      // 渲染
    }
    // 生命周期 - 解除挂载
    window.one.unmount =  async function (){
      console.log('tow unmount');
    }
  </script>
</html>

至此构建传统的子引用构建完成。

demo 到此也结束。运行起来可以看到完整的效果。

4.基于qiankun的微应用示例（Vue及传统应用混合）一 传统应用

4.基于qiankun的微应用示例（Vue及传统应用混合）一传统应用