A set of code based on Vue-cli supports multiple projects

Application Scenario

In the B2B business, customers will more or less require some customization for the same product. From the skin, pictures, to some small functional differences.
The front end is always the first to be modified. If the changes are minor, pulling a branch will increase the maintenance cost. If too many branches are pulled, if there is a problem with the main trunk, it is equivalent to copying n copies, which is really a very painful experience. So, is it possible for one set of code to support multiple projects?

Some time ago, I received a requirement and the technology selected was VUE, which was built using vue-cli. A set of code needs to support more than ten customers. Each customer's skin and functions have some minor differences, but the main process is roughly the same. We studied the solution in this scenario.

Ideas

The overall idea is modularization, and then directly assemble different modules according to the input commands during compilation to package the pages we need.
There are two problems here:

1. How to divide pages and control the granularity of components?

2. How to perform differential compilation?

Project Structure

The same page has some common parts and some different parts. The componentization idea of ​​Vue itself makes it easy for us to think of splitting the page into components, then extracting the common ones and processing them separately.

Overall project structure

• build
  

The build structure mainly includes some script configurations of webpack

• config
  

The config file is mainly project-related configuration. We often use it to configure the listening port, package output path and naming when there is a port conflict.

• src
  

Source code files.

• assets

Static resources, usually pictures, styles, etc.

• less

Style files are divided into different themes here.

• pages

Page File

• router

routing

• util

Tools

• components

The folders contain the components of each project. The components directory contains public components.

• static
  

Static resources will not be compiled by webpack. Generally put external reference files.

webpack packaging configuration

How to compile differentially?

1.cross-env uses environment variables. During the compilation phase, different components are compiled according to the variables passed in for compilation.
First, we need to change the package.json file

"scripts": {
 "dev:gx": "cross-env BRANCH_ENV=gx node build/dev-server.js",
 "build:gx": "cross-env BRANCH_ENV=gx node build/build.js"
 },

At this time, when we compile, we can enter the corresponding command to pass in the corresponding environment variables.
eg: npm run dev:gx will pass in BRANCH_ENV=gx.

2. Inject this environment variable into config/prod.env.js

module.exports = {
 NODE_ENV: '"production"',
 API_PATH:'""',
 BRANCH_ENV: JSON.stringify(process.env.BRANCH_ENV) || '"base"',
 ignoreCsrfToken:'"false"'
}

3.webpack.base.conf.js

 resolve: {
 extensions: ['', '.js', '.vue', '.json'],
 fallback: [path.join(__dirname, '../node_modules')],
 alias: {
 'vue$': 'vue/dist/vue.common.js',
 'src': path.resolve(__dirname, '../src'),
 'assets': path.resolve(__dirname, '../src/assets/images/'+process.env.BRANCH_ENV),
 'components': path.resolve(__dirname, '../src/components'),
 'componentsDif': path.resolve(__dirname, '../src/components/'+process.env.BRANCH_ENV),
 }
 },

It can be seen that we used the environment variables injected by the compilation command when introducing the alias. For example, suppose the compile command I enter is

npm run build:gx

At this time

'assets': path.resolve(__dirname, '../src/assets/images/'+process.env.BRANCH_ENV)
// equivalent to 'assets': path.resolve(__dirname, '../src/assets/images/gx')

Page references

1. Image reference

<img class="icon-arrow" src="~assets/arrow.png">
//According to the compilation command. The image reference is src/assets/images/gx/arrow.png

background: url(~assets/btn_1.png) no-repeat;

ps: Remember to add the ~ sign when using an alias

2. Component reference

//Public component import ruleTitle from 'components/RuleTitle'
//Differentiation component import ruleContent from 'componentsDif/RuleContent'

Summarize

In short, the core idea is to follow the compilation command to pass in environment variables, and use the configuration of environment variables and aliases to differentiate packaging. What is more difficult is how to control the granularity of components and how to split components, which needs to be customized according to different needs.

The above is the details of a set of code based on Vue-cli to support multiple projects. For more information about a set of code based on Vue-cli to support multiple projects, please pay attention to other related articles on 123WORDPRESS.COM!