Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to set environment variables in vue. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Vue sets environment variables

There are usually three environments during development: the development environment, the test environment, the online environment

A concept in vue is pattern. By default, there are three modes in vue cli first.

Development mode for vue-cli-service serve

Production mode for vue-cli-service build and vue-cli-service test:e2e

Test mode for vue-cli-service test:unit

But often there are more than three types of development:

Local environment (local)

Development environment (development)

Test environment (devtest)

Pre-release environment (beta)

Production environment (production)

Reference links: configuring environment variabl

Create different environment variable files

As stated in the official documentation, set the environment variables unique to a certain mode by adding a suffix to the .env file. I have five environments here, so I have configured five .env files. As shown below:

Add content to the .env file

The basic format is as follows:

NODE_ENV= environment name VUE_APP_URL= corresponding environment address

The configuration of my local environment is shown in the following figure:

I use easy-mock simulated data locally, so the configured address is the mock interface address.

Add execution statements corresponding to different environments in package.json

As stated in the official documentation, different modes can be configured by passing-- mode. My own project configuration is shown below:

Use

The file has been created and the configuration statement has been written. How do I use it?

Execute the command statement for which environment you need on the home page.

For example, if I need a local environment now, I will execute npm run local-serve.

As shown in the following figure:

Then the environment name is obtained through process.env.NODE_ENV, and the corresponding url of the environment is obtained through process.env.VUE_APP_URL.

For example, in the axios request, we can set its baseURL to process.env.VUE_APP_URL.

As shown in the following figure:

If you are not sure which environment variable you are in, take a look at console.log ("current environment variable: + process.env.NODE_ENV") and console.log ("current environment path:" + process.env.VUE_APP_URL).

In short, which environment variable you need, the environment variable corresponding to npm run will be done!

What is a multi-environment variable?

When the project is running, it will run different environments according to the startup instructions. in different environments, we configure the corresponding variables to meet our development needs, which is called multi-environment variables.

The environment is generally divided into development environment, test environment and production environment.

Configuration proc

1. Configure serve test build in package.json under the root directory of the project

Execute different environments through-- mode xxx

"scripts": {"serve": "vue-cli-service serve-open", "test": "vue-cli-service build-mode testing", "build": "vue-cli-service build",}

-open automatically opens the page at run time

Start locally through npm run serve and execute development

Pass the npm run test packaging test and execute testing

Package formally through npm run build and execute production

2. Create a .env. * file in the root directory of the project

.env.development local development environment configuration

NODE_ENV='development'

Formal environment configuration for .env.production

NODE_ENV='production'

.env.staging test environment configuration

NODE_ENV='production'

3. Create a config folder under src and configure three corresponding js under it

Reconfigure the three because it is easy to modify, there is no need to restart the project, in line with the development habit.

/ / introduce different configurations according to the environment process.env.NODE_ENVconst config = require ('. / env.' + process.env.NODE_ENV) module.exports = config

Configure the variables corresponding to the environment. Take the local environment file env.development.js as an example. Users can modify it according to their needs.

/ / Local environment configuration module.exports = {title: 'vue-h6-template', baseUrl:' http://localhost:9018', / / Project address baseApi: 'https://test.xxx.com/api', / / Local api request address APPID:' xxx', APPSECRET: 'xxx'}

4. Introduced in the main.js file in the src file under our root directory

Import {baseUrl} from ". / config/index"; / / because the exported object is an object, the structure assignment console.log (baseUrl); this is the end of this article on "how to set environment variables in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.