乾坤多应用嵌套(父应用-->子应用-->孙应用)--孙应用配置:
最编程
2024-05-01 17:23:06
...
main.js
let instance = null function render(props = {}) { const { container } = props; instance = new Vue({ router, render: (h) => h(App), }).$mount(container ? container.querySelector('#app') : '#app'); } // 独立运行时 if (!window.__POWERED_BY_QIANKUN__) { render(); } // 解决加载资源是404的问题 if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } export async function bootstrap() { console.log('[vue] vue app bootstraped'); } export async function mount(props) { console.log('[vue] props from main framework', props); render(props); } export async function unmount() { instance.$destroy(); instance.$el.innerHTML = ''; instance = null; }
history模式路由base配置
const router = new VueRouter({ mode: 'history', // 根据全局参数判断自己是作为第几层应用运行,加上对应的前缀,其实这里的前缀也可以在上层应用配置对应的全局参数来传递 base: window.__POWERED_BY_QIANKUN_PARENT__ ? '/main/sub' : window.__POWERED_BY_QIANKUN__ ? '/sub' : '/', routes })
vue.config.js
const { name } = require('./package'); module.exports = { devServer: { port: 10000, headers: { 'Access-Control-Allow-Origin': '*', } }, configureWebpack: { output: { // 把子应用打包成 umd 库格式,这里和父应用不同的是要把 -[name] 去掉,不然会出现样式丢失的问题 library: `${name}`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${name}` }, }, }
原文地址:https://www.cnblogs.com/wjs0509/p/17247962.html