single-spa结合vue项目初探

single-spa结合vue项目初探

本次案例以vue-element-admin为例，验证single-spa的可接入性。根据single-spa的官网介绍，推荐将项目的所有文件（包括图片和css）等文件全部打包入一个js文件。但是这样我们原来的分包等打包优化都会变得没有意义，那么为什么要全部打入一个包呢？

因为single-spa的接入是以入口js文件接入的，而不是入口html文件，这样一来就会导致一些资源加载路径的错误，从而导致无法正常显示，但也并不是完全不可以。下面将一步步一起尝试。

安装依赖

我们需要安装几个依赖来方便接入single-spa

npm install -save single-spa-vue
npm install -save systemjs-webpack-interop  // 根据需要引入

配置文件

首先修改vue-element-admin的一些文件，首先是main.js，这里只列举新增的代码块，其余保持不变，唯一需要变得是删除Vue实例化的部分（即 new Vue(…)）。

import "./set-public-path";
import singleSpaVue from "single-spa-vue";

const vueLifecycles = singleSpaVue({
   
  Vue,
  appOptions: {
   
    render: h => h(App),
    router,
    store
  }
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

然后在main.js同级目录下添加set-public-path.js文件，这个文件的作用是可以简化文件的引用路径,这样在项目跑起来后就可以方便引入打包后的文件（只是在运行时简化），如果是先打包后引入的话就不需要这个文件。

import {
    setPublicPath } from "systemjs-webpack-interop";

setPublicPath("vueAdmin", 2);

修改vue.config.js

这里修改打包方式，这部分是我尝试过之后可用的打包方式，暂且以这个为例。

// 只保留如下 chainWebpack 配置，其余的删除
 chainWebpack: config => {
    // 保留原项目处理svg的loader
    config.devServer.set("inline", false);
    config.devServer.set("hot", true);
    config.module
      .rule("svg"