欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

乾坤多应用嵌套(父应用-->子应用-->孙应用)--孙应用配置:

最编程 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