基于vue3+webpack5+qiankun实现微前端

一 主应用改造(又称基座改造)

1 在主应用中安装qiankun(npm i qiankun -S)

 2 在src下新建micro-app.js文件,用于存放所有子应用。

const microApps = [
  // 当匹配到activeRule 的时候,请求获取entry资源,渲染到container中
  {
    name: 'micro-vue3',
    entry: '//localhost:40000',// 子应用的html入口
    activeRule: '/vue1', // 路由匹配规则
    container: '#micro-vue3', // 渲染到哪里
    props: {},
  },
];

export default microApps;

 3 改造vue.config.js,允许跨域访问子应用页面

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8000,
    headers: {
      // 重点1: 允许跨域访问子应用页面
      'Access-Control-Allow-Origin': '*',
    },
  },
})

 4 改造main.js

 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router';
import ElementPlus from 'element-plus'; //element-plus
import 'element-plus/dist/index.css'; //element-plus
import { registerMicroApps, start } from 'qiankun';
import microApps from './micro-app';
// createApp(App).use(router).use(ElementPlus).mount('#app');
let app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount('#app');

// 注册子应用
registerMicroApps(microApps, {
  //还有一些生命周期 如果需要可以根据官网文档按需加入
  beforeMount(app) {
    console.log('挂载前', app);
  },
  afterMount(app) {
    console.log('卸载后', app);
  },
});
console.log("hello 主应用")
// 启动子应用
start({
  prefetch: false, //取消预加载
  sandbox: { experimentalStyleIsolation: true }, //沙盒模式
});

5 在App.vue中写响应跳转子应用(根据自己的项目找对应位置写,不局限于App.vue)

 

<template>
  <el-menu :router="true" mode="horizontal">
    <!-- 子应用的跳转路径 -->
    <el-menu-item index="/index">主应用 main</el-menu-item>
    <el-menu-item index="/vue1">子应用 vue3</el-menu-item>
  </el-menu>
  <!-- 主应用路由渲染出口 -->
  <router-view />
  <!-- 子应用的容器 -->
  <!-- 微前端子应用渲染出口 -->
  <div id="micro-vue3"></div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    return {};
  },
};
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

需要注意这里的对应关系:

 二 子应用改造

1 在src下新建public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2 改造main

 

import { createApp } from 'vue'
import App from './App.vue'
import './public-path'; // 注意需要引入public-path
// createApp(App).mount('#app')
let instance = null;
console.log("hello 子应用")
function render({ container } = {}) {
  instance = createApp(App);
  // instance.use(router);
  // instance.use(store);
  instance.mount(container ? container.querySelector('#app2') : '#app2');
}
// 如何独立运行微应用?
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
// 子应用接入 qiankun
//  1 导出三个必要的生命周期钩子函数
// bootstrap 渲染之前
// mount 渲染函数
// unmount 卸载函数
export async function bootstrap() {
  // 启动
  console.log("启动")
}
export async function mount() {
  console.log("挂载")
  // 挂载
  render();
}
export async function unmount() {
  // 例如从一个子应用到另一个子应用 需要先卸载后再加载,防止内存泄露
  console.log("卸载")
  // 卸载
  instance.unmount();
  instance = null; 

  // instance.$destroy();
  // instance.$el.innerHTML = ''
  // instance = null
}

3 改造vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
console.log("hello 子应用")
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 40000,
    headers: {
      'Access-Control-Allow-Origin': '*', //开发时增加跨域 表示所有人都可以访问我的服务器
    },
  },
  configureWebpack: {
    output: {
      // 必须打包出一个库文件
      library: `${name}-[name]`,
      // 库格式必须是 umd
      libraryTarget: 'umd', // 把子应用打包成 umd 库格式
      // jsonpFunction: `webpackJsonp_${name}`,
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    },
  },
})

 三 改造后效果

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
很抱歉,作为AI语言模型,我无法提供完整的代码。不过我可以给您一些指引: 1. 在Vue3项目中集成Cesium离线版本,需要先安装Cesium离线版本的npm包。可以使用以下命令安装: ``` npm install cesium-offline ``` 2. 在webpack配置文件中添加Cesium相关的配置。Cesium离线版本需要一些额外的配置才能正常运行。以下是一个示例配置: ``` const CopyWebpackPlugin = require('copy-webpack-plugin') const cesiumSource = 'node_modules/cesium-offline/Build/Cesium'; module.exports = { // ... output: { // ... sourcePrefix: '' }, amd: { // Enable webpack-friendly use of require in Cesium toUrlUndefined: true }, resolve: { alias: { // Cesium module name cesium: path.resolve(__dirname, cesiumSource) } }, module: { // ... unknownContextCritical: false, rules: [ { test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/, use: ['url-loader'] }, { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [ // Copy Cesium Assets, Widgets, and Workers to a static directory new CopyWebpackPlugin({ patterns: [ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' }, { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }, { from: path.join(cesiumSource, 'Workers'), to: 'Workers' }, { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' } ] }) ] } ``` 3. 在Vue组件中使用Cesium。在Vue组件中,可以使用Cesium的全局变量`Cesium`来创建地图等组件。以下是一个示例组件: ``` <template> <div id="cesiumContainer"></div> </template> <script> import { defineComponent } from 'vue' import * as Cesium from 'cesium/Cesium' export default defineComponent({ mounted() { const viewer = new Cesium.Viewer('cesiumContainer') viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), point: { pixelSize: 10, color: Cesium.Color.RED } }) } }) </script> ``` 在这个示例组件中,我们使用了Cesium创建了一个简单的地图,并在地图上添加了一个红色的点。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值