If it can help you, you can give the star project address

Project demo environment (project on Google Cloud, not very stable lately) : Alternate address of PuzzleDemo

What is a Puzzle

Puzzle is a project structure based on Vue and Webpack4 implementation; Business modules can be combined like puzzle pieces with architectural modules to form different systems, all of which can be hot-pluggable in a production environment; This means you can add new functional modules to your system at any time, or even redesign the entire system, without having to completely replace the entire project.

In addition, when multiple projects are developed using this architecture, even if modules are packaged by different projects, they can be quickly assembled in a production environment, making it very easy to reuse modules.

The characteristics of

  • Core: Supports hot swap of production environment modules

  • Supports flexible combination of service modules

  • The pedestal as a pedestal module also supports multiple co-existence (which means you can easily greyscale test)

How to do it

  1. Connect the base/business module toumdModule mode is usedwebpackPack out
  2. throughLoadJSMounting these modules will result in thewindowObject to attach the module object to
  3. This object is loaded into the schema through dynamic routing

Run the project

The development environment

Install dependencies

npm install
Copy the code

Building third-party dependencies

npm run dll
Copy the code

run

npm start
Copy the code

The production environment

Install dependencies

npm install
Copy the code

Building third-party dependencies

npm run dll
Copy the code

Build, in this step you can choose which base modules and business modules you want to package for flexible combination

npm run build
Copy the code

Hot swap related

The front-end project loads modules according to the request of the back-end menu. For example, the return format of the back-end request in this project is (data from Aliyun) :

[{id: "elastic".name: "Elastic computation".leaf: false.children: [{id: "ecs".name: "Cloud Server ECS".leaf: true.page: "/ecs".puzzle: "elastic"
      },
      // ...].icon: "aperture".puzzle: "elastic"
  },
  {
    id: "database".name: "Database".leaf: false.children: [
    	// ...].icon: "aperture".puzzle: "database"
  },
  // ...
]
Copy the code

Specify the level 1 directory as the module directory (you can modify the project based on your own requirements here)

If the ID of a solid module is elastic or database, the system requests entry files of all subsystems in the production environment to load modules and generate routes.

Therefore, by returning results of different business modules of different users, different modules can be loaded to control permissions;

Similarly, by returning the results of different base modules of different users, different bases can be loaded, so as to conduct gray scale testing and other operations (currently, the base used by the system is written in public/config.js, so this article is only for reference, and the project itself can be used freely).

Package the architecture separately

npm run core
Copy the code

Pack the base module separately

npm run frame --name="xxx"
Copy the code

Package business modules separately

npm run puzzle --name="xxx"
Copy the code

You can add the packaged modules to the production environment or replace them in the production environment

The code structure

Development environment structure

config

This folder contains all of the webPack configuration files

public

Config.js: project configuration for production environment configuration

Index. HTML: HTML template

src -> core

The code

src -> frames

Base module code, multiple base modules placed side by side

src -> puzzles

Business module code, multiple business modules placed side by side

static

It is used to place static resources and will be copied directly to the static folder in the production environment

static -> dll

Third party libraries and common code generated by NPM Run DLL, etc

Production environment structure

The production environment code is placed in a certain structure and can be updated and replaced freely

core

Architecture code generated by NPM Run Core

frames

Base module code generated by NPM Run Frame

puzzles

Business module code generated by NPM Run Puzzle

static

Static resources, including packaged third-party libraries and common code, etc

PS

This architecture is only a summary of daily work. Specific business scenarios can be modified, and pedestal modules can be freely played. The information returned by the business module can also be increased as required; All modules can be pluggable as long as they follow certain standards and are uniformly processed in core.

For details, please refer to the project code. If convenient, you can give a STAR and project address