关于前端:vite环境变量配置

环境变量就是会依据以后的代码环境变动的变量叫做环境变量。
咱们在我的项目中的代码环境大抵分为上面几种：
1、开发环境
2、测试环境
3、预公布环境
4、灰度环境
5、生产环境

咱们在我的项目中通常须要辨别线上环境和开发环境的后端地址，例如：

开发环境：http://dev.api/
生产环境：https://api/

咱们每次在开发的时候都要辨别confug.url的地址，如果测试的时候忘改地址了，地址是线上地址，那就会出大问题，测试数据间接影响到线上了。

咱们在应用一些第三方sdk：百度地图sdk、小程序sdk等第三方sdk接口的时，须要带上身份信息APP_KEY，测试环境、生产环境、开发环境是不一样的key，例如这里的三种开发环境对应的不同sdk：

• 开发环境：110
• 测试环境：111
• 生产环境：112

假如当初是开发环境，APP_KEY为110，这里模仿一个axios申请：

// request.js
const getUserInfo = () => {
   axios.post({
     params : {
        APP_KEY : 110  // 开发环境的APP_KEY : 110
     }
   })
}

如果咱们切换到生产环境，这里的APP_KEY须要换成112，如果切到测试环境，APP_KEY要换成111，这种手动更换是十分麻烦的。

所以咱们这里须要辨别一下生产环境和开发环境
新建两个文件：
.env.development 开发和测试环境
.env.production 生产环境

// .env.development 
APP_KEY = 110 
BASE_URL = http://test.api/

// .env.production
APP_KEY = 112
BASE_URL = http://api/

咱们在运行npm run dev的时候，心愿下面的asiox的申请读的是.env.development 文件中的APP_KEY，运行npm run build的时候，心愿asiox的申请读的是.env.production中的APP_KEY，并且对应的axios.basu_url主动更换到对应的地址。（这就是环境变量的意义)

在vite中环境变量的解决：dotenv第三方库（vite内置了dotenv库）
dotenv第三方库会在启动npm run dev的时候读取.env文件，并解析这个文件中的环境变量，将其注入到process对象上。

在node.js中，process对象（过程对象）代表node.js应用程序。
process 对象是一个全局变量，它提供以后 Node.js 过程的无关信息，以及管制以后 Node.js 过程。
process文档 （👈点击中转）

export default defineConfig(({command})=>{
    console.log('process内容',process.env);
    // ......其余配置
})

vite思考到和其余配置的一些抵触问题，它不会间接注入到process对象下，而是调用vite的loadEnv来手动确认env文件。
loadEnv的三个参数:
1、mode：模式，依据你启动的的命令来的，比方npm run dev就是开发环境，build就是生产环境，如果你启动的命令为：npm run dev --mode development，那么mode会设置为development传递进来，启动命令为npm run dev的话零碎会默认帮咱们主动补全，这里也能够对mode进行更改，--mode xxxx(自定义名)
2、envDir：环境变量配置文件所在目录,这里能够应用process.cwd()，也能够这么写：envDir:"C:\Users\123\Desktop\vite-test"指向文件目录地址
3、prefixes：承受的环境变量前缀，不写默认为 env

export default defineConfig(({command,mode})=>{
    const env = loadEnv(mode,process.cwd(),prefixes="")
    console.log(env);  // 这里APP_KEY 110,并且BASE_URL也对应的是测试环境地址，挂载到env上面

    // ......其余配置
})

process.cwd()：返回以后node过程的工作目录

当咱们调用loadEnv的时候，它会做如下几件事件：
1、间接找到.env文件，并解析其中的环境变量，放到一个对象里

2、将传进来的mode这个变量的值进行拼接：.env.development，并依据提供的目录去取对应的配置文件进行解析，并放进一个对象里

3、咱们能够了解为上面的操作：
const baseEnvConfig = 读取.env的配置
const modeEnvConfig = 读取.env.mode(依据传入的mode决定，mode=development那么就是.env.development)文件
const lastEnvConfig = {...baseEnvConfig,...modeEnvConfig}

如果是客户端，vite会将对应的环境变量注入到import.meta.env外面去。
然而这里vite做了一个拦挡，为了避免咱们将隐衷性的变量间接注入到import.meta.env，咱们的环境变量就必须得是VITE_结尾，否则vite不会将环境变量注入到import.meta.env

// .env.development文件：开发环境
APP_KEY = 110 
BASE_URL = http://dev.api/

// request.js
console.log('import.meta.env的内容',import.meta.env)

未找到.env.development文件中的环境变量，因为结尾不是VITE_，vite拦挡了注入操作。

// .env.development文件：开发环境
VITE_APP_KEY = 110 
VITE_BASE_URL = http://dev.api/

当然，VITE_是一个默认前缀，咱们也能够在vite.base.config.js文件中更改import.meta.env注入的默认前缀：

import { defineConfig } from "vite";
export default defineConfig({
    envPrefix:"ABC_"  // 配置import.meta.env注入的前缀名称
})

到这里环境变量配置就曾经实现了，如果咱们想要增加新的环境，例如：测试环境，那么只须要新建一个.env.test文件

// .env.test文件：测试环境
ABC_APP_KEY = 111
ABC_BASE_URL = http://test.api/

在package.json中增加测试环境的启动形式"test" : "vite --mode test"

{
  "scripts": {
    "dev": "vite",
    "build" : "vite build",
    "test" : "vite --mode test"
  },
  // ......其它配置
}

启动npm run test，loadEnv会主动依据--mode test来寻找环境变量文件，.env后拼接test，也就是.env.test文件

// request.js
console.log('import.meta.env的内容',import.meta.env)
// 利用配置的环境变量申请
const getUserInfo = () => {
    axios.post({
        params : {
            APP_KEY : import.meta.env.ENV_APP_KEY  // 依据环境变量主动匹配APP_KEY
        }
    })
}