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

This article mainly introduces "what is the method of configuring environment variables by Vue". In daily operation, I believe that many people have doubts about the method of configuring environment variables by Vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what is the method of configuring environment variables by Vue?" Next, please follow the editor to study!

The first configuration scripts configuration serve test build in package.jsonpackage.json Use-- mode xxx to execute different environments start locally through npm run serve, execute development through npm run test packaging test, execute testing via npm run build packaging formal, execute production "scripts": {"serve": "vue-cli-service serve-- open", "test": "vue-cli-service build-- mode testing", "build": "vue-cli-service build" } brief description of the second configuration Click tps above for details

Variables that   begins with VUE_APP_ can be accessed through process.env.VUE_APP_ in the code.

  for example, VUE_APP_MY_NAME = 'live in the wind and waves' is accessed through process.env.VUE_APP_MY_NAME.  

In addition to the VUE_APP_xxx variable, there are always two default variables NODE_ENV and BASE_URL in your application code

Third, create a new file in the root directory

.env.development local development environment configuration

The contents are as follows

NODE_ENV='development'

.env.staging test environment configuration

NODE_ENV='production'

Formal environment configuration for .env.production

NODE_ENV='production' fourth

The file has been created, the next step is to encapsulate baseURL. If you encapsulate axios, write the code to judge the environment in a new baseURL.js in your axios parent folder.

Let baseURL = ""; if (process.env.NODE_ENV = = "development") {/ / the development environment is api baseURL = "/ api" because I have written the cross-domain relocation path here;} else if (process.env.NODE_ENV = = "production") {/ / formal environment baseURL = "https://www.baidu.com";} else {/ / Test Environment baseURL =" https://www.ceshi.com"; } export default baseURL

Fifth

Export baseURL imports baseURL where axsio is encapsulated and changes the public address to baseURL variable (baseURL variable is the environment judgment for writing)

The URL requested with different commands is different, such as

/ / start the local server npm run serve// start the packaging command npm run build// start the test environment command npm run test

One detail: if you run the packing command, the direct opening of index.html in dist is relative to the computer drive letter.

To use a plug-in to manage downloads directly in the vsc plug-in

At this point, the study on "what is the method of configuring environment variables by Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.