微前端——vue子项目改造（三）

网上的例子大多是react的就不再写react如何改造，下面介绍vue-cli3的改造`

vue.config.js配置

1.因为之后我们需要采用sytemjs去加载模块，所以我们需要修改webpack的配置改成输出为amd规范。
config.output.library = 'single'
config.output.libraryTarget = 'amd'
2.配置一个devServer指定的地址，以及设置headers允许跨域（为了之前在开发环境中调试而配置）
3.修改输出目录、关闭hash命名、关闭map
此操作仅仅是为了自己的开发方以及build迅速罢了，也可不修改

const path = require('path')
const env = process.env.NODE_ENV
module.exports = {
  configureWebpack: config => {
    config.output.library = 'single'
    config.output.libraryTarget = 'amd'
    config.entry = { app: ['./src/main.js'],store:'./src/Store.js' }
    if (env === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },
  // 配置输出目录
  outputDir: path.resolve(__dirname, './single'),
  // 关闭hash
  filenameHashing: false,
  // 关闭map
  productionSourceMap: false,
  // 静态文件路径
  publicPath: '/single',
  devServer: {
    port: '8201',
    headers: {
      "Access-Control-Allow-Origin": "*",
    }
  }
}

main.js改造

import Vue from 'vue'
import App from './App.vue'
import singleSpaVue from 'single-spa-vue'
import store from './store/index'

Vue.config.productionTip = false
// new Vue({
//   render: h => h(App),
// }).$mount('#app')

// 下面是single-spa配置
const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue-app',
    store,
    render: h => h(App)
  }
})

export const bootstrap = [
  vueLifecycles.bootstrap,
];

export function mount(props) {
  // 从redux传入Vuex
  store.commit('setGlobalEventDistributor',props.globalEventDistributor)
  store.commit('setStore',props.store)
  // 动态创建dom
  createDomElement();
  return vueLifecycles.mount(props);
}

export const unmount = [
  vueLifecycles.unmount,
];

function createDomElement() {
  let el = window.document.getElementById('vue-app');
  if (!el) {
    el = window.document.createElement('div');
    el.id = 'vue-app'
    document.body.appendChild(el)
  }
  return el
}

1、引入single-spa-vue模块修改其渲染的方式

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue-app',
    store,
    render: h => h(App)
  }
}

2、在mount中获取从父级框架中注入的自定义的配置信息加载到自己的状态管理中（vuex）
3、createDomElement这个方法应该清楚，只是为了创建一个dom用户挂载vue
4、子模块独立运行

// new Vue({
//   render: h => h(App),
// }).$mount('#app')

此处注释掉的代码为原vue项目渲染的方式，如果你想子模块独立运行则可仍旧使用原方式进行渲染。利用process.env.NODE_ENV来判断环境来觉得这段代码是否需要执行那更好，这边就不做详细介绍。
5、创建一个通信文件
在vue.config.js中我们可以看到，做了如下修改config.entry = { app: ['./src/main.js'],store:'./src/Store.js' }，新增了一个入口。
此文件用于各模块间通信，后续会详细介绍

import { createStore, combineReducers } from 'redux'

const initialState = {
  refresh: 0
}

function render(state = initialState, action) {
  switch (action.type) {
    case 'REFRESH':
      return { ...state,
        refresh: state.refresh + 1
      }
    default:
      return state
  }
}

// 向外输出 Store
export const storeInstance = createStore(combineReducers({ namespace: () => 'vue', render }))