demand

1. The company’s project pages are customized and sold to different Parties. Some customers want MODULES A,B and C, some want modules C and D, and some want modules A and D. How to package them on demand?

Realize the principle of

1: The following takes vue-cli3 construction project as an example to understand that the core logic is actually to build different routers. js to distinguish, the router of customer 1 contains A,B,C, and the router of customer 2 contains C and D. We can think of several different routes to router.js. So here’s the question. The entry main.js references router.js and must switch router.js to package each time, so main.js code is not easy to maintain.

The solution

We can also split main.js into main_customer. js and main_customerb.js, and then use webPack’s mode feature to read the different main.js

Start by creating.env.CustomerA and.env.CustomerB files in the package.json root directory:

VUE_PROJECT_NAME = "CustomerA"
NODE_ENV = "production"
Copy the code
VUE_PROJECT_NAME = "CustomerB"
NODE_ENV = "production"
Copy the code

Then write to vue.config.js

module.exports = {
  outputDir: 'dist'.pages: {
    index: {
      // Page entry
      entry: 'src/main_' + process.env.VUE_PROJECT_NAME +'.js',}},Copy the code

Write to script in package.json

    "build_CustomerA": "vue-cli-service build --mode CustomerA"."build_CustomerB": "vue-cli-service build --mode CustomerB".Copy the code

We will see that when build_CustomerA is executed, mode is CustomerA. Webpack will look for the.env.customera file. Override the contents of process.env’s object literal. Entry then points to main_customera.js. Main_customera.js points to Router_Customera.js. Router_customera.js contains A,B, and C pages, so only A,B, and C pages go into the final dist folder. On-demand packaging at the page level is implemented. It also facilitates testing on demand.