前言

前端在开发项目过程中需要区分各个环境(devlopment、test、production)的配置，例如请求地址，api等，像vue是用.env文件配置的，那uniapp在使用HBuilderX的方式部署时，.env文件是加载不到的。最近写H5发现了一种简单的方式

一、package.json文件配置

{
  "name": "h5",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "uni-app": {
    "scripts": {
      "h5dev": {
        "title": "h5开发版",
        "browser": "chrome",
        "env": {
          "UNI_PLATFORM": "h5",          
          "VUE_APP_HTTP_URL": "http://xxxxx",
          "VUE_APP_HTTP_API": "/developmentapi",
          "ENV": "development"
        },
        "define": {
          "H5-DEV": true
        }
      },
      "h5test": {
        "title": "h5测试版",
        "browser": "chrome",
        "env": {
          "UNI_PLATFORM": "h5",
          "VUE_APP_HTTP_URL": "http://xxxxx",
          "VUE_APP_HTTP_API": "/testapi",
          "ENV": "test"
        },
        "define": {
          "H5-TEST": true
        }
      },
      "h5prod": {
        "title": "h5生产版",
        "browser": "chrome",
        "env": {
          "UNI_PLATFORM": "h5",
          "VUE_APP_HTTP_URL": "https://xxxxxx",
          "VUE_APP_HTTP_API": "/productionapi",
          "ENV": "production"
        },
        "define": {
          "H5-PROD": true
        }
      }
    }
  }
}

配置完以上代码，我们在运行项目或打包项目就可以看到

二、判断环境

在获取配置时我们就可以通过process.env来获取了
例如：

let baseUrl = "";
if (process.env.ENV !== "development") {
  baseUrl = process.env.VUE_APP_HTTP_URL;
}

总结

工作中小总结，有问题欢迎指正