vue3+qiankun框架初体验

项目框架基座和子项目都为vue3

qiankun官网

首先我们需要了解什么是微前端，他是做什么的。

1.什么是微前端
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。简单来说就是就是可以把多个不同框架的项目部署在不同环境，但又可以在一个项目中访问。
2.他是做什么的
他可以将不同框架的多个项目组成统一项目，而组成项目的子项目又可以单独部署单独访问。可以说他们的关系是互相关联而又互不关联。

说明：由于项目还并没有进行上线测试，此代码还不能保证上线没有问题，如有问题请与我交流沟通。
主项目代码实现
1.首先我们需要建立.env.development,.env.production,.ent.qa。3个文件，这3个文件的作用是为了配置前端打包项目路径配置，方便上线，测试，开发环境的区分(注意：文件内配置必须为VUE_APP_开头，否则后面用到的时候不能进行解析)
env.development

NODE_ENV = 'development'
// 开发主项目
VUE_APP_BASE_URL = 'http://localhost:8080'
// 开发子项目
VUE_APP_APP_URL = 'http://localhost:8081'
VUE_APP_SERVICEMESH_URL = 'http://localhost:8082'
VUE_APP_RESOURCE_URL = 'http://localhost:8083'
VUE_APP_MONITOR_URL = 'http://localhost:8084'
VUE_APP_SYSTEM_URL = 'http://localhost:8085'

env.production

NODE_ENV = 'production'
// 生产主项目
VUE_APP_BASE_URL = 'http://localhost:8080'
// 生产子项目
VUE_APP_APP_URL = 'http://localhost:8081'
VUE_APP_SERVICEMESH_URL = 'http://localhost:8082'
VUE_APP_RESOURCE_URL = 'http://localhost:8083'
VUE_APP_MONITOR_URL = 'http://localhost:8084'
VUE_APP_SYSTEM_URL = 'http://localhost:8085'

env.qa

NODE_ENV = 'qa'
// 测试主项目
VUE_APP_BASE_URL = 'http://localhost:8080'
// 测试子项目
VUE_APP_APP_URL = 'http://localhost:8081'
VUE_APP_SERVICEMESH_URL = 'http://localhost:8082'
VUE_APP_RESOURCE_URL = 'http://localhost:8083'
VUE_APP_MONITOR_URL = 'http://localhost:8084'
VUE_APP_SYSTEM_URL = 'http://localhost:8085'

package.json增加

"scripts": {
   
    "serve": "vue-cli-service serve ",
    "build": "vue-cli-service build ",
    "lint": "vue-cli-service lint",
    "serve-qa": "vue-cli-service serve --mode qa",
    "serve-product": "vue-cli-service serve --mode production",
    "build-qa": "vue-cli-service build --mode qa",
    "build-product": "vue-cli-service build --mode production"
  },

主项目router.js

import {
   
    createRouter,
    createWebHashHistory
} from 'vue-router';
import store from '../store/store';
// 采用路由懒加载方式
const login = () => import('../components/static/Login.vue');
const Home = () => import('../components/static/Home.vue');
const router = createRouter({
   
    history: createWebHashHistory(),
    routes: [{
   
        path: '/',
        redirect: login,
        name: '登录'
    }, {
   
        path: '/login',
        component: login,
        name: '登录'
    }, {
   
        path: '/home',
        name: 'Home',
        component: Home
    }]
});
export default router;

主项目src下创建micro文件夹，
micro/apps.js 用来配置子项目路由

// /src/micfo/apps.js
//process.env为上边配置的路径第值
console.log(process.env);
const apps = [{
   
    name: 'kem-app-name',
    entry: process.env.VUE_APP_APP_URL,
    container: '#KEMAPP',