preface

A front-end project must run in a variety of environments from development to online, and the corresponding configuration of environment variables will be carried out at the same time. If manpower is used to maintain these variables, errors will inevitably occur, so this function is most appropriate for Webpack.

Webpack features

The webPack configuration item has a mode option and can be configured with two options, production Development, to identify which mode is used for this packaging. The following code can be read in the project code:

if (process.env.NODE_ENV === 'production') {
    BASE_URL = 'https://host/production/api'
} else if (process.env.NODE_ENV === 'development') {
    BASE_URL = 'https://host/development/api'
}
Copy the code

In this way, the production and development mode apis can be configured separately without changing each package. If additional variables need to be added to the process, they can be customized using webpack.definePlugin as follows:

// webpack.base.js
const webpack = require('webpack')
webpackConfig = {
    plugins: [
        new webpack.DefinePlugin({
            SOME_CONFIG: `"localhost"`}})]Copy the code

One of the things to note is’ ‘localhost”‘, if you are defining a string, you need double quotes around it.

Vue project environment variable configuration

If you are using the vue cli3 project initialization, can be very convenient for environment configuration, details please see the official explanation cli.vuejs.org/zh/guide/mo…

However, this configuration has some limitations. According to the document, it can only support three operating environments at most. Once the project exceeds three operating environments, the Vue CLI cannot support it.

Subsequent updates

After the comments of the students, I looked at the official documents carefully, it seems that it can support more than three kinds of environment configuration, embarrassing, but this configuration idea can be applied to other projects, so I will keep the article.

webpack-chain

Because vue CLI3 has a high degree of encapsulation of Webpack, there is no way to modify the source configuration file as vue CLI2 does. However, CLI3 throws webpack-chain to customize the default configuration.

// vue.config.js
chainWebpack: config= > {
    config.module
        .rule('js')
        .exclude
        .add(/\.min\.js$/)
        .end()

    config
        .output
        .set('filename'.`js/[name].[hash:8]-v${__VERSION__}.js`)
        .set('chunkFilename'.`js/[id].[hash:8]-v${__VERSION__}.js`)}Copy the code

Before you configure, take a look at how the Vue CLI is configured for environment variables, run in the project root directory:

vue inspect > output.js

An output.js file is generated, which opens and scrolls to the bottom. Around line 1080, you can see a configuration like this:

/* config.plugin('define') */
new DefinePlugin({
    'process.env': {
        NODE_ENV: '"development"'}})Copy the code

Modify this configuration to add additional environment variables to the process.

Environment variable configuration for egg.js

Recently, I saw the convenience of egg environment variable configuration while working with egg.js, so I decided to follow egg’s lead and integrate this solution into Vue CLI3.

Environmental differentiation

Configuration changes will be explained later, starting with how to differentiate between different environments. For environment differentiation, you can pre-set a label when running the package command. Here you can use cross-env to set vue CLI environment variables, as shown in the following code:

{
    "scripts": {
        "serve": "cross-env run_server=development vue-cli-service serve -mode development"."build": "npm run build:dll && cross-env run_server=production vue-cli-service build --no-clean"."build:UAT": "npm run build:dll && cross-env run_server=uat vue-cli-service build --no-clean",}}Copy the code

There are three different values defined for run_server, development, production, and UAT, which correspond to different service environments, so when packaging, you can just run different scripts to get the relevant environment variables and add them to the build process.

Configuration of environment variables

Create the following files in the project root directory:

A simple configuration example:

// development_server.json { "VUE_APP_RUN_ENV": "DevelopmentServer", "SERVER_IP": "/api", "DEV_PORT": 80, "SERVER_DOMAIN" : "www.google.com", "PROXY_TARGET_IP" : "http://192.168.2.236:8989"}Copy the code

Add the following code to vue.config.js

const RUN_SERVER = process.env.run_server || 'development'
const DefaultENVConfig = require('./env_config/default.json')
const serverEnvConfig = Object.assign({}, DefaultENVConfig, require('./env_config/' + RUN_SERVER + '_server.json'))
Copy the code

Obtain the corresponding configuration file from the incoming target environment. Meanwhile, use object. assign function to merge the target environment configuration with the default environment configuration to obtain the final environment variable configuration, and then use webpack-chain to write it to the Webpack configuration:

// vue.config.js
module.exports = {
    chainWebpack: config= > {
        config.plugin('define').tap(args= > {
            for (let i in serverEnvConfig) {
                args[0] ['process.env'][i] = `"${serverEnvConfig[i]}"`
            }
            return args
        })
    }
}
Copy the code

In this way, very simple code implements multiple environment configurations. If you need to add a new environment, just add a configuration file and set the configuration file name to the packaging command.