vue3配置环境变量，小白简单易学

[环境变量]的意义就是防止我们更新打包的时候写错变量，合并代码这些一系列问题

首先看看效果

左边是本地测试环境，右边是打包后的生产环境，写这个环境变量的好处就是，你在本地开发的时候变量随便改，不会影响生产环境，只要你不去改生产环境的文件就ok

好了，下面小白按照下面的来，非常简单

第一步创建一个.env.development这是本地开发环境

设置对应的变量，注意要用VUE_APP开头

VUE_APP_ENV=development
VUE_APP_API_URL=http://localhost:3000

第二步创建.env.production生产环境变量

VUE_APP_ENV=production
VUE_APP_API_URL=https://api.xxxxx.com

这里创建好了之后最后配置一下package.json就ok了

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build ",
    "lint": "vue-cli-service lint"
  }

最后你运行一下跑一下看一下输出就可以了

created() {
		console.log('当前环境：',process.env.VUE_APP_API_URL)
	},