vue2子应用接入微前端

vue2基于webpack4进行配置

  • 修改vue.config.js配置
  • 输出模式修改为库模式
  • 将访问目录指向dist目录
  • 修改跨域请求，允许主应用访问子应用的资源 ```javascript const path = require(‘path’); const { name } = require(‘./package’);

function resolve(dir) { return path.join(__dirname, dir); }

const port = 9004;

module.exports = { outputDir: ‘dist’, assetsDir: ‘static’, filenameHashing: true, publicPath: http://localhost:${port}, devServer: { contentBase: path.join(_dirname, ‘dist’), // 开发环境下访问的目录为dist hot: true, disableHostCheck: true, port, headers: { ‘Access-Control-Allow-Origin’: ‘*’, // 允许跨域请求，主应用访问子应用的资源 }, }, // 自定义webpack配置 configureWebpack: { resolve: { alias: { ‘@’: resolve(‘src’), }, }, output: { libraryTarget: ‘umd’, // 把子应用打包成 umd 库格式 filename: ‘vue2.js’, // 输出文件名称 library: ‘vue2’, // 在全局环境下访问的内容 window.vue2 jsonpFunction: `webpackJsonp${name}`, }, }, };

  2. - 修改main.js
  3.    - 添加微前端标识和生命周期
  4.    - 声明render函数来创建vue实例
  5.    - 区分不是微前端和是微前端情况下，运行整个项目
  6. ```javascript
  7. import Vue from 'vue'
  8. import App from './App.vue'
  9. import router from './router';
  10. import store from './store';
  12. Vue.config.productionTip = false
  14. let instance = null;
  17. const render = () => {
  18.   instance = new Vue({
  19.     router,
  20.     store,
  21.     render: h => h(App)
  22.   }).$mount('#app-vue')
  23. }
  24. // 微前端环境标识，在不是微前端情况下也可以正常运行
  25. if (!window.__MICRO_WEB__) {
  26.   render()
  27. }
  29. // 开始加载
  30. export async function bootstrap() {
  31.   console.log('vue2 开始加载');
  32. }
  34. // 加载成功
  35. export async function mount() {
  36.   console.log('渲染成功');
  37.   render()
  38. }
  39. console.log(instance);
  40. // 卸载
  41. export async function unmount(ctx) {
  42.   console.log('卸载');
  43.   instance = null;
  44.   const { container } = ctx
  45.   if (container) {
  46.     document.querySelector(container).innerHTML = ''
  47.   }
  48. }

vue3子应用接入微前端

  • vue3的vue.config.js的改动和vue2是一样的，这里就不写了
  • vue3的main.js改动 ```javascript import { createApp } from ‘vue’; import App from ‘./App.vue’; import router from ‘./router’; import { setMain } from ‘./utils/global’

let instance = null;

function render() { instance = createApp(App); instance .use(router) .mount(‘#app’); }

if (!window.MICRO_WEB) { render(); } export async function bootstrap() { console.log(‘vue3.0 app bootstrap’); }

export async function mount(app) { setMain(app) render(); }

export async function unmount(ctx) { instance.unmount(); instance = null; const { container } = ctx if (container) { document.querySelector(container).innerHTML = ‘’ }

<a name="vnTb6"></a>
# react15子应用接入微前端

- 修改webpack.confg.js
```javascript
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: {
    path: ['./index.js']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'react15.js',
    library: 'react15',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    publicPath: 'http://localhost:9002/'
  },
  module: {
    rules: [
      {
        test: /\.js(|x)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.(c|sc)ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: {
          loader: 'url-loader',
        }
      }
    ]
  },
  optimization: {
    splitChunks: false,
    minimize: false
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),

    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' },
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9002,
    historyApiFallback: true,
    hot: true,
  }
}
  • 修改index.js ```javascript import React from ‘react’ import ReactDOM from ‘react-dom’ import BasicMap from ‘./src/router/index.jsx’; import “./index.scss” import { setMain } from ‘./src/utils/global’

const render = () => { ReactDOM.render(( ), document.getElementById(‘app-react’)) }

if (!window.MICRO_WEB) { render() }

export async function bootstrap() { console.log(‘react bootstrap’) }

export async function mount(app) { setMain(app) // 记录主应用传过来的方法 console.log(‘react mount’) render() }

export async function unmount(ctx) { console.log(‘react unmout’) const { container } = ctx if (container) { document.querySelector(container).innerHTML = ‘’ } } ```

react16子应用接入微前端

  • react16和react15修改方式一样，这里就不写了。