The method of judging the development, testing and formal environment of Vue project

This article mainly explains how to judge the development, testing and formal environment of Vue project. Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the method of judging the development, testing and formal environment of the Vue project".

Method one

The simplest way: judge the environment by judging the location.href

Function env () {if (process.env.NODE_ENV = = "development") return "development"; / / Development environment if _ (window.location.href.includes ('192.168')) return 'test'; / / Test environment, "192.168" return' production' / / online environment} method 2

Projects built for Vue Cli 2.x

Projects built by Vue Cli 2.x have only two development and compilation commands, npm run dev and npm run build. To add a test environment, we can extend a npm run test command to output the code executed in the test environment.

1. Create a test.js file in the build folder

The code in test.js is simple, just two lines. The main thing is to configure an environment variable to distinguish between the test and the formal environment. There is no direct modification to the original process.env.NODE_ENV for fear that it will affect the original logic.

Note: the value of type must be nested in single and double quotation marks. It cannot be 'test',' directly, or an error will be reported. The specific code is as follows:

/ / configure the environment variable type to testprocess.env.type ='"test"'/ / import the build.js file and execute the original compiled code require ('. / build') 2. Modify the prod.env.js file in the config folder

Once configured, you can call process.env.type in the project code as follows:

Module.exports = {NODE_ENV:'"production"', / / assign the environment variable set above to the type attribute type: process.env.type} 3. Add a npm run test command to the package.json file

Add a command to execute the test.js file we created above

"scripts": {"dev": "node build/dev-server.js", "test": "node build/test.js", "build": "node build/build.js"}, 4. Determine the environment in the project code

After following the steps above, you can write the judgment in the project code.

Let baseURL// development environment if (process.env.NODE_ENV = = 'development') {baseURL =' http://192.168.1.110:8080/'// compilation environment} else {/ / test environment if (process.env.type = = 'test') {baseURL =' http://test.xxx.com/' / / formal environment} else {baseURL = 'http : / / app.xxx.com/'}} so far I believe you have a deeper understanding of the method of judging the development, testing and formal environment of the Vue project, so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!