uniapp或者vue项目环境变量的模式来自动替换网络请求的baseUrl

进行联调的时候会有两套或者更多的环境，区分开发环境和生产环境来进行网络请求，这时候环境变量就起作用了

效果：

1. 用npm run serve启动项目，发起开发环境（baseUrl为development.com）的网络请求

2. 用npm run serve:pro启动项目，发起生产环境(baseUrl为production.com)的网络请求

3. 用npm run build:pro打包项目放在生产环境，如果是自动化部署，这里应该修改Dockerfile文件里的配置，因为打包后的项目放在了dist/build/h5文件夹下了

代码地址：

https://gitee.com/tang-yican/env-test

实现：

1. 先搭建一个uniapp的项目

搭建教程地址：
https://uniapp.dcloud.net.cn/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app

2. 这条命名创建一个env-test的uniapp项目

vue create -p dcloudio/uni-preset-vue env-test
1

3. 修改package.json里面的配置，把里面的scripts脚本代码改成如下配置：

  "scripts": {
    "serve": "npm run serve:dev:h5",
    "build": "npm run build:dev:h5",
    "build:dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build",
    "serve:dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "serve:pro": "npm run serve:pro:h5",
    "build:pro": "npm run build:pro:h5",
    "build:pro:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "serve:pro:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-serve"
  },
1
2
3
4
5
6
7
8
9
10

4. 建一个config/index.js环境变量配置文件

// src/config/index.js
// 这个 NODE_ENV 就是环境变量
// 当用npm run serve启动项目时，NODE_ENV 为 development
// 当用npm run serve:pro启动项目时，NODE_ENV 为 production
const { NODE_ENV } = process.env;
const config = {
  development: {
    baseUrl: "https://development.com/api",
  },
  production: {
    baseUrl: "https://production.com/api",
  },
};

export default {
  baseUrl: config[NODE_ENV].baseUrl,
  shareUrl: config[NODE_ENV].shareUrl,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5. 建一个utils/request.js网络请求的全局文件

// src/utils/request.js
// 引入环境配置变量文件
import config from "../config/index.js";
const baseUrl = config.baseUrl;

function request(url, data = {}, method = "POST") {
  const param = {
    ...data,
  };
  return new Promise((resolve, reject) => {
    uni
      .request({
        url: `${baseUrl}${url}`,
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: param,
        method,
      })
      .then((res) => {
        const result = res[1].data;
        if (Number(result.code) === 200) {
          resolve(result.data);
        } else {
          reject(result);
        }
      })
      .catch((err) => {
        uni.showToast({
          title: "数据请求失败",
          icon: "none",
          duration: 2000,
        });
      });
  });
}

export default request;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

6. 修改src/pages/index/index.vue文件,添加测试网络请求代码

// src/pages/index/index.vue
<template>
  <view class="content"> </view>
</template>

<script>
import request from "../../utils/request";
export default {
  data() {
    return {};
  },
  onLoad() {
    this.testRequest();
  },
  methods: {
    testRequest() {
      request("testurl", {
        testParam: 1,
      });
    },
  },
};
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27