How to configure environment variables and distinguish environment packaging for multi terminal project of uniapp development

Preface

---

The premise of this blog post is uniapp Is based on vue3.0 + vite + HbuilderX 3.4.15.20220610 In the context of version

• 1, Use uniapp When developing cross end projects , I'm using HbuilderX Developed , because HbuilderX To publish a project, click publish in the menu bar , Publish only one environment , You have to change the code to switch environment variables every time , Very trouble , It may also be missed , So I studied how to distinguish the environment, package and go online .
• 2, Then someone will ask , Why not vue-cli Develop packaged projects , Direct use .env Documents or `cross-env Differentiate between environment variables , Note here that my project is to generate app Of , So it is inconvenient to use vue-cli, To develop .

Solution

I saw it in the official documents package.json Extended configuration usage , This article , Can solve this problem very well

• 1, This method also has defects , That is, you can't be here app Upper use , Only for web pages and applets .
• 2, I saw someone on the Internet propose to use appid Differentiate the environment , But I tried it myself , Discover... For each environment appid It's all the same , There is no way to distinguish the environment , This method was abandoned by me .
• 3, Then I thought of myself , Can it be like H5 equally , I am here app Make a function to switch the environment , Although only one bag can be packed , But the environment can be switched within the package , Can this solve the problem
• 4, After practice , My idea was confirmed , May adopt .

First step ： install package.json file

If you have this file in your project , Just ignore this step , without , Just look down .
Use npm init -y establish package.json file , This file can be found in the root directory of the project after it is created

The second step ： To configure package.json file

Be careful ： Official documents say , This file cannot have comments , So to copy the code, delete the comments . There is a document gate on it

{
    
  "name": "uniuiTemplate",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  //  The following is the configuration of all environment variables of different platforms that you can configure 
  "uni-app": {
    
  		"scripts": {
    
			"h5dev":{
    
				"title":"h5 Development Edition ",
				"browser":"chrome",  
				"env": {
    
				    "UNI_PLATFORM": "h5", // Benchmark platform , You must write the value allowed by the platform 
					"VUE_APP_BASE_URL":"http://127.0.0.1:h5dev/"  // Custom environment variables 
				},
				"define":{
    
					"H5-DEV":true
				}
			},
			"h5test":{
    
				"title":"h5 The beta ",
				"browser":"chrome",  
				"env": {
    
				    "UNI_PLATFORM": "h5",
					"VUE_APP_BASE_URL":"http://127.0.0.1:h5test/",
					"MY_TEST":"test-variable"
				},
				"define":{
    
					"H5-TEST":true
				}
			},
			"h5prod":{
    
				"title":"h5 Production version ",
				"browser":"chrome",  
				"env": {
    
				    "UNI_PLATFORM": "h5",
					"VUE_APP_BASE_URL":"http://127.0.0.1:h5prod/"
				},
				"define":{
    
					"H5-PROD":true
				}
			},
			"mp-weixin-dev":{
    
				"title":" Wechat development version ",
				"env": {
    
				    "UNI_PLATFORM": "mp-weixin",
					"VUE_APP_BASE_URL":"http://127.0.0.1:mp-weixin-dev/"
				},
				"define":{
    
					"MP-WEIXIN-DEV":true
				}
			},
			"mp-weixin-test":{
    
				"title":" Wechat beta ",
				"env": {
    
				    "UNI_PLATFORM": "mp-weixin",
					"VUE_APP_BASE_URL":"http://127.0.0.1:mp-weixin-test/"
				},
				"define":{
    
					"MP-WEIXIN-TEST":true
				}
			},
			"mp-weixin-prod":{
    
				"title":" Wechat production version ",
				"env": {
    
				    "UNI_PLATFORM": "mp-weixin",
					"VUE_APP_BASE_URL":"http://127.0.0.1:mp-weixin-prod/"
				},
				"define":{
    
					"MP-WEIXIN-PROD":true
				}
			}
  		}
  	}

}

The third step ： To configure package.json Changes and operations after the completion of the document

After the configuration is completed, you will find HbuilderX The editor has a few more environment variables , As follows

---

function

Click on function You will find several more options , Here's the picture ： Then you can choose the environment you want to run to develop .

---

issue

Click on issue You will find several more options , Here's the picture ： Then you can choose the environment you want to release for deployment or upload code .

Conclusion

Here we are , You can use hbuilderx Develop or publish different environments and platforms , Say goodbye to manually switching environment variables .

---

Tips: This configuration uses vue-cli It's OK, too .