前端的环境变量用的最多的大概就是根据不同的环境去打包，不用一个个修改ip。

- antd pro umi的环境变量。

创建一个UMI_ENV的环境变量，根据这个变量打包生产不同的dist文件，同时在浏览器标签上标注是测试环境还是开发环境。

创建三个config文件

import { defineConfig } from 'umi';

export default defineConfig({
  define: {
    API_URL: 'http://192.168.85.47:9900',
    'process.env.UMI_ENV': process.env.UMI_ENV,
  },
});

ProLayout自定义title

//自定义title
    pageTitleRender: (_, __, info) => {
      let title = '';
      if (process.env.UMI_ENV === 'dev') {
        title = '（开发环境）';
      } else if (process.env.UMI_ENV === 'test') {
        title = '（测试环境）';
      }
      return info?.title + title;
    },

title变了

- vue2项目的环境变量

也是在package.json对应命令里添加环境变量，然后添加对应的.env文件 VUE_APP_API_URL=api.example.com （以 VUE_APP_ 开头的变量会被Vue CLI自动注入到应用程序的 process.env 中，在Vue组件或代码中，可以通过 process.env.VUE_APP_API_URL 访问这个环境变量的值。）

还是直接看vuecli的官方文档更有性价比……