十个好用到爆炸的Python技巧-CFANZ编程社区

背景

在前端工程化盛行之时，环境变量的概念悄然进入了前端的视野。在远古时代的前端开发中，没有工程化的概念，开发环境、测试环境、生产环境都需要手动配置。然而，随着现代打包工具如 webpack、snowpack、rollup 等的流行，我们不得不开始重视起环境变量的作用。

在现代前端开发的整个链路中，环境变量扮演着项目配置的枢纽角色。在旧的项目中，或许并没有采用现代化的环境变量管理方式，而是通过手动创建多个环境配置文件（如 config/dev.env.js、config/prod.env.js）来设置环境变量。虽然这种方式能够满足基本需求，但不够灵活和方便，需要手动维护多个配置文件，难以自动切换。所有这就有了使用.env.development、.env.production、.env.test来帮助我们管理环境变量的方式。

如何使用？

通常我们会在项目的根目录下新建3个文件，分别为.env.development、.env.production、.env.test 注意文件是只有后缀的。

然后在每个文件内分别写上我们对应的，我们所匹配的模式和需要请求的API即可

//依赖vite打包项目的写法
 VITE_BASE_MODE = development/production/test：
 VITE_BASE_URL = 'API'//我们对应的API
 
 //依赖webpacl打包项目的写法
 VUE_APP_API_URL=https://api.a.com

3.我们需要修改我们的package.json文件

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

4.在我们的网络请求文件中使用，

vite

在项目中，如果我们使用的是 vite ，要想在项目中使用变量的开头就需要是 VITE_，而不是 VITE_ 开头的变量就不能被获取到。

// 在 vite 程序中获取
console.log(import.meta.env.VITE_APP_BASE_API); // /dev-api
// 在 vue2 项目中获取
console.log(process.env.VUE_APP_BASE_API); // /vite
console.log(process.env.VUE_APP_API_URL) //wepback

注意：通常Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，不过当我们的确需要时，我们可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。所以我们需要在vite.config.js文件中进行下面的配置。

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 如果当前环境是开发环境，则 mode 为 development
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  const { VITE_APP_BASE_API } = env // VITE_APP_BASE_API = /dev-api
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

vite官方文档说明