Skip to content

微前端笔记

仲灏2021-12-15约 1 分钟

<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/a6201f.md for this page in Markdown format</div>

qiankun.js

切换路由时微应用无反应

  • 问题出在官方demo中 切换时把路由清空了

vue2 配置:

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  // router = null;
}

主应用中微应用加载自己的静态资源路径错误

vue2 配置:

vue.config.js

js
const realname = 'https://merge.thingsiot.cn/'
const port = 8088
const publicPath = process.env.NODE_ENV === 'production' ? realname : `http://localhost:${port}`;
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('fonts')
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 4096, // 小于4kb将会被打包成 base64
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[hash:8].[ext]',
            publicPath,
          },
        },
      })
      .end();
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 4096, // 小于4kb将会被打包成 base64
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[hash:8].[ext]',
            publicPath,
          },
        },
      });
  },
};