乐趣区

关于前端: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 对象下,而是调用 viteloadEnv来手动确认 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 testloadEnv 会主动依据 --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}
    })
}
退出移动版