Recently, the company's front-end project is being restructured. After my research, the architecture has been determined to be bff+qiankun microservices. bff hasn't started yet, and the microservice has encountered many problems, and it has been used for a while, so let's summarize temporarily:

1. The deployment stage is the easiest to step on the pit

2. It is easy to step on the problem of routing switching

3. Dependency conflicts and style conflicts between the main application and sub-applications

Will continue to update in the future~

1.Cannot GET /cooperation/board

Scenes:

When the main application loads the sub-application resources, the sub-application resources cannot be found.

analyze

In the process of analyzing the reason, the reason was not found in the configuration of webpack5. Considering the use of scaffolding vue-cli, and then the webpack5 used by the scaffolding, I searched for vue-clithe change records.

Found the reason in this PR. fix(cli-service): restrict request headers of historyApiFallback in WebpackDevServer by githoniel Pull Request #6162 vuejs/vue-cli GitHub
this PR will restrict request headers 
of historyApiFallback only work with 
[ 'text/html', 'application/xhtml+xml']

solve

A fetch request initiated by qiankun when loading a sub-application, and there is no text/htmlwaiting header in the request header. So historyApiFallbackthe configuration has no effect on it. And this project is historymode routing, so the request with route /xxx/xxx will result in 404.

Modify the scheme to pass in historyApiFallbackthe configuration for yourself.
 historyApiFallback: {
      index: '/xxx/index.html' // xxx为路径，和打包output配置有关
    },

2.Invalid options in vue.config.js:"css.requireModuleExtension" is not allowed

reason

This issue vue-cliis caused by an upgrade.

There is a micro-app that uses css modulesthe scheme, which is configured in vue.config.js, css.requireModuleExtensionand this field has been removed in the V5 version. "css.requireModuleExtension" is not allowed · Issue #6607 · vuejs/vue-cli · GitHub . Use the following css-loaderconfiguration instead.

solve

module.exports = {
  css: {
    loaderOptions: {
      css: {
        modules: {
          auto: () => true
        }
      }
    }
  }
}

3. The less version upgrade resulted in the division writing not being converted

reason

This problem is caused by the upgrade of the less version.

The reason is that the default configuration of math has been modified in Less.js Usage | Less.js Chinese Documentation - Less Chinese Network , 4.x. (@m-gap / 2)Or (@m-gap ./ 2)will be converted by default.

solve

After a micro-app less version was upgraded from 3.x to 4.x, it was found that there was a problem with the style. After positioning, it is found padding: @m-gap / 2 @m-gap;that the conversion is padding: 16px / 2 16px, and the division is not calculated.

4. Master-sub-application style isolation

Scenes

A typical scenario is that the main application uses vue3+elementplus, and the sub-application uses vue2+elementUI. First of all, let me explain that the universe has its own style isolation between sub-applications, but there is no style between the main and sub-applications, which will inevitably lead to style conflicts Problems (including third-party style libraries, such as elementui)

solve

There are 3 solutions, the first is to manually set the style name (not easy to use), the second is to use the css modules plug-in

The third one I use has a namespace in elementplus version 2.2 and above, and can modify a prefix for all styles, for example: .el-button, we can replace it with ep-button, which avoids the main application Conflicts caused by using the same style library with sub-applications

5. Configure output error in webpack5

The error is as follows

reason

jsonpFunction is replaced by chunkLoadingGlobal in webpack5

solve

configureWebpack: {
        output: {
          library: `${name}-[name]`,//6.接入乾坤
          libraryTarget: 'umd', // 把微应用打包成 umd 库格式
          chunkLoadingGlobal: `webpackJsonp_${name}`, 
        //   jsonpFunction在webpack5: `webpackJsonp_${name}`,
         // jsonpFunction在webpack5被chunkLoadingGlobal替代
        },
      },

6. An error is reported after the micro application is deployed

Scenes

Refresh the page after deployment, and an error will be reported when pressing Enter in the url address bar

The error is as follows

关键字：Expected a JavaScript module script but the server responded with a MIME type of

reason

Vite static resource path configuration problem

solve

The publicpath was before './' changed to '/'

The official documentation says that './' is used for the development environment

[qiankun] Front-end micro-service architecture stepping pit record

foreword

1.Cannot GET /cooperation/board

Scenes:

analyze

solve

2.Invalid options in vue.config.js:"css.requireModuleExtension" is not allowed

reason

solve

3. The less version upgrade resulted in the division writing not being converted

reason

solve

4. Master-sub-application style isolation

Scenes

solve

5. Configure output error in webpack5

The error is as follows

reason

solve

6. An error is reported after the micro application is deployed

Scenes

The error is as follows

reason

solve

Guess you like