SoFunction
Updated on 2025-04-05

Detailed explanation of vue-cli4 configuring packaging commands for different development environments

Preface

Why do you need to configure multiple environment variables?

In the development process of a product, it is generally going through this process:Local development → beta deployment → test → pre-online → officially launched. The server address and interface address in each corresponding link... will be different. So how do we need to deal with this situation?

1. How to configure environment variables

1. Create a file

Create a new one in the project root directory of the scaffolding built in vue-cli4.env.[model]document,modelAs a variable, you can use the variable value of this model to determine which environment it currently belongs to. Model can be modified according to your needs, and the corresponding key-value pair is written in the file. Create as many environments as you need.env.[model]In the root directory, the file is as shown below.

# Pre-send environment.
# Development Environment.
# Production environment.
# Test environment.

Briefly explain why four files are created

First of all, the file name we create must be.，. The xxx of the file must be consistent with the commands inside the script object in it。

For example:

We created.This file, then the packaging command we configuredbuild:testThe value of"vue-cli-service build --mode test", --modetestMust follow the file.Consistent, so that we can find the parameters configured in the environment variable file by packaging the command."build:test": "vue-cli-service build --mode test"

Please note! ! !

onlyNODE_ENV，BASE_URLHeyiVUE_APP_The variables at the beginning will passStatually embedded into the client-side code. This is to avoid accidentally exposing private keys that may have the same name on the machine.

2. Environment variable file description

Now we come to the configuration file. The function of this configuration file is to determine whether the current packaging environment is produced or tested, or local. Of course, you can also have many environments. In the configuration file we pass.VUE_APP_BASE_URLThis global field determines the environment and then matches the corresponding interface address. Pay attention to the aboveNODE_ENV = "production"It cannot be omitted, vue-cli 4.0 and later versions will be based onNODE_ENV = "production"To determine whether the production environment is, if you change this, it will be defaultedNODE_ENV = "development"，developmentandproductionThe package structures packaged in mode will be different. For consistency, the first field of the configuration file should be set toNODE_ENV = "production"。

.(Test environment variables)

NODE_ENV = "test"
VUE_APP_BASE_URL = "Interface request test address"
VUE_APP_API = "Interface request test address"

.(Formal environment variable)

NODE_ENV = "production"
VUE_APP_BASE_URL = "Interface request formal address"
VUE_APP_API = "Interface request formal address"

.(Pre-send environment variables)

NODE_ENV = "beta"
VUE_APP_BASE_URL = "Interface request pre-send address"
VUE_APP_API = "Interface request pre-send address"

.(Development environment variable)

NODE_ENV = "development"
VUE_APP_BASE_URL = "/api"  // The identity of the cross-domain proxy configurationVUE_APP_API = "Test environment address"

Explain the development environment variable fileVUE_APP_BASE_URLThe value of  points usString ID of the configured cross-domain proxy.

 = {
  publicPath: './',
  devServer: {
    proxy: {
      '/api': {
        target: 'Interface request test address', // The address of the API server        ws: true,  // Agent websockets        changeOrigin: true, // Virtual sites need to be managed origin        pathRewrite: {   // Rewrite the path, for example, '/api/aaa/ccc' is rewritten to '/aaa/ccc'          '^/api': ''
        }
      }
    }
  }
}

3. Configure the packaging command

Scripts under the file:

{
  "script": {
    "dev": "vue-cli-service serve && webpack-dev-server --open --mode dev",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode development",
    "build:prod": "vue-cli-service build --mode production",
    "build:beta": "vue-cli-service build --mode beta",
    "build:test": "vue-cli-service build --mode test"
  }
}

The created above mentioned.env.[model]File, file namemodelCorrespondingPackaging scripts in files--model [model]。

For example, I want to package the formal environment now, and the formal environment corresponds to.env.[model]that is.。

existofscriptAdded in"build:prod": "vue-cli-service build --mode production",inproductionThis corresponding configuration file namemode, so that when webpack is packaged, it will automatically track this file and read various configuration fields. We can pass it anywhere in the projectGet the xx configuration properties.

Now we only need to run the corresponding script command to package the project code for the corresponding environment. For example: I want to pack nowproductionProjects in the environment, run on the consolenpm run build:prod, you can perform formal environment packaging. Runnpm run build:dev, then the test environment can be packaged, and this mode can also be used for automated deployment.

To sum up, the packaging commands and environment variables of the version are configured.

This is the end of this article about vue-cli4 configuring packaging commands for different development environments. For more related contents of vue-cli4 , please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!