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"