基于vue作为基座（main）的配置

[yangangzhang]

背景

现在有四个vue项目，想整合起来，就是各个子项目可以开发，最后一个main总的项目运行，总项目中包含四个vue项目的路由，形成左侧菜单

目的

您好，请问有没有基于vue作为基座（main）的配置啊

[kuitos]

这个地方替换成相应的 vue 实现就可以了

qiankun/examples/main/index.js

Line 14 in ee8e098

ReactDOM.render(<Framework loading={loading} content={appContent}/>, container);

[guojingwen]

@kuitos 这一段替换成 vue 并不能运行报错 访问 /vue 报错

example我是用vue-cli生成的 替换的代码如下
function render ({ appContent, loading }) {
if (!window.loaded) {
let framework = Vue.extend(Framework)
window.content = new framework()
Object.assign(content, {
content: appContent,
loading
})
window.content.$mount('#container')
} else {
Object.assign(window.content, {
content: appContent,
loading
})
}
window.loaded = true
}

[guojingwen]

还是拜托给一下 vue 基座 的example配置

[fenngding]

@guojingwen vue的使用,需要在main.js中把这个注册过程包裹在window load后的事件里面,我试过single-spa里面有一个监听需要在load事件后5s内执行这个注册过程
`/**

• 匹配路由
• @param {string} 当前路由的路径
• @returns {Boolean} 返回是否
  */
  function genActiveRule(routerPrefix) {
  return location => location.pathname.startsWith(routerPrefix);
  }

let lastContent = null;
/**

• dom渲染函数
• @param {string} 当前路由的路径
• @returns {Boolean} 返回是否
  */
  function render({ appContent,loading }){
  if(lastContent === appContent){
  return;
  }
  lastContent = appContent;
  document.querySelector("#micro-container").innerHTML = appContent;
  }
  let microInstance = false;
  window.addEventListener("load", ()=>{
  if(microInstance){
  return;
  }
  console.log("事件加载了");
  microInstance = true;
  registerMicroApps(
  [
  {
  name: "travel app", entry: "//localhost:8081/micro-user/business-travel", render:render, activeRule: genActiveRule("/user/business-travel")
  },
  ],
  {
  beforeLoad: [
  app => {
  console.log("before load", app);
  }
  ],
  beforeMount: [
  app => {
  console.log("before mount", app);
  }
  ],
  afterUnmount: [
  app => {
  console.log("after unload", app);
  }
  ],
  },
  );
  start();
  });`

[fenngding]

@guojingwen 不过比较奇葩的是,qiankun内部有一个执行机制,是需要render两次,其中最后一次只是为了传送loading 的状态,这个在vue里面会导致前面一个render在执行后,qiankun 的mount函数执行后,由vue的初始化dom会被第二次render覆盖掉 @kuitos

[guojingwen]

老哥回复的真迅速，我还在想办法联系issue的人有没有解决呢？ 万分感谢！我试试看

[fenngding]

@kuitos 建议将loading和appContent的分别提供两个函数接口,否则vue这种执行机制需要自己缓存上一次的appContent是否和本次的相同,如果相同就弃用,总感觉还是保持输入功能的单一性会更加好一点,也减少消耗

[guojingwen]

还是不行，报错跟上面一样

代码如下
`import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { start, registerMicroApps } from 'qiankun'
// import Framework from './framework'

Vue.config.productionTip = false

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

// render({ loading: true })

/**

匹配路由
@param {string} 当前路由的路径
@returns {Boolean} 返回是否
/
function genActiveRule(routerPrefix) {
return location => location.pathname.startsWith(routerPrefix);
}
let lastContent = null;
/*

dom渲染函数
@param {string} 当前路由的路径
@returns {Boolean} 返回是否
*/
function render({ appContent,loading }){
if(lastContent === appContent){
return;
}
lastContent = appContent;
document.getElementById("container").innerHTML = appContent
// document.querySelector("#container").innerHTML = appContent;
}
let microInstance = false;
window.addEventListener("load", ()=>{
if(microInstance){
return;
}
console.log("事件加载了");
microInstance = true;
registerMicroApps(
[
{ name: 'vue app', entry: '//localhost:7101', render, activeRule: genActiveRule('/vue') }
],
{
beforeLoad: [
app => {
console.log("before load", app);
}
],
beforeMount: [
app => {
console.log("before mount", app);
}
],
afterUnmount: [
app => {
console.log("after unload", app);
}
],
},
);
start();
});`

[fenngding]

@guojingwen 你是否忘记把main.js当做umd输出了? 需要vue.config.js里面配置一下(packageName自己命名):
configureWebpack: { devtool: "source-map", output:{ library: packageName, libraryTarget: "umd", jsonpFunction: webpackJsonp_${packageName}, } },

[guojingwen]

之前只配置了 libraryTarget
现在按照你说的配置下，还是不行，我的配置如下

[fenngding]

应该不至于吧,我们这边的项目已经成功合入了多个微服务了.
你微服务导出了对应的生命周期么
`
let instance = null;
export async function bootstrap() {
console.log("react app bootstraped");
}

export async function mount(props) {
console.log("props from main framework", props);
instance = new Vue({
el: "#app",
router,
store,
render: h => h(App),
});
}

export async function unmount() {
console.log("unmount");
instance.$destroy();
instance = null;
}
或者
import singleSpaVue from "single-spa-vue";
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render: h => h(App),
router,
store,
el:"#app"
},
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
`

[guojingwen]

localhost:7101 是你官网vue的demo

[kuitos]

现代的 UI library 原理都是一样的~
写了个 vue 的 demo，相关注释打开就能跑
see

qiankun/examples/main/index.js

Lines 17 to 41 in 50c7618

	/*
	examples for vue
	*/
	// if (!app) {
	// app = new Vue({
	// el: '#container',
	// data() {
	// return {
	// content: appContent,
	// loading,
	// };
	// },
	// render(h) {
	// return h(Framework, {
	// props: {
	// content: this.content,
	// loading: this.loading,
	// },
	// });
	// },
	// });
	// } else {
	// app.content = appContent;
	// app.loading = loading;
	// }

[guojingwen]

更新了下项目，放开vue的注释 确实能跑起来，

但是用 webpack 配置后，还是同样的问题，vue.config.js 也处理了

[guojingwen]

@fenngding 原因找到了， 原来example主项目 用webpack 构建， 子项目（vue app）也需要用webpack构建
非常感谢！

[yangangzhang]

@guojingwen 大哥，有没有fork的代码，看看webpack构建的主项目，子项目，感谢
我这里报个错误

[guojingwen]

跨域问题，目前我是规避了一下，没细研究，
终端执行 open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/guojingwen/Documents/MyChromeDevUserData
windows 方案差不多，网上搜一下

[yangangzhang]

@guojingwen 我这个是接入subApp子项目，就是vue-cli3配置的项目，然后配置好其他，就报这个错误了，你接入vue-cli3的子项目吗？

[guojingwen]

是的，跨域问题，你网上搜搜

[yangangzhang]

主项目parcel，子项目parcel;主项目webpack，子项webpack? @ @guojingwen
子项目parcel接入就没有跨域问题，感觉是哪的配置问题，网上找了集中方法，包括您提供的，关闭了chrome跨域，还是报错

[yangangzhang]

应该不至于吧,我们这边的项目已经成功合入了多个微服务了.
你微服务导出了对应的生命周期么
`
let instance = null;
export async function bootstrap() {
console.log("react app bootstraped");
}

export async function mount(props) {
console.log("props from main framework", props);
instance = new Vue({
el: "#app",
router,
store,
render: h => h(App),
});
}

export async function unmount() {
console.log("unmount");
instance.$destroy();
instance = null;
}
或者
import singleSpaVue from "single-spa-vue";
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render: h => h(App),
router,
store,
el:"#app"
},
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
`

大哥，有没有fork的代码，看看webpack构建的主项目，子项目，感谢。
我这里报个错误，跨域了，主项目parcel，子项目parcel;主项目webpack，子项webpack?

子项目parcel接入就没有跨域问题，感觉是哪的配置问题

[bingo618]

基于Angular作为基座如何配置？

[kuitos]

这个问题已经解决我先关了，其他问题可以开别的 issue 来看

[guojingwen]

@kuitos 我还没研究透， 子应用多个路由跳转还有些问题 vue的子应用 返回 并没有移除子应用dom