vue 环境变量的设置与使用

TODO

在 vue2+ts+vue-components 中不能直接读取 ENV 变量，需要补充 VUEAPP前缀

vite 下访问环境变量

import.meta.env

vite 提供了一个特殊的对象：import.meta.env，用于暴露环境变量。其包含几个在任意时候都可以访问的内建变量：

• import.meta.env.MODE：表示运行模式
• import.meta.env.BASE_URL：表示基本 url，通过 base 配置项决定
• import.meta.env.PROD：是否为生产环境
• import.meta.env.DEV：是否为开发环境（与 PROD 永为相反值）
• import.meta.env.SSR：是否运行在 server 上

import.meta.env 几乎可以用在除 vite.config.ts 外的其他地方。根据不同的运行环境（dev or prod）会暴露出对应的环境变量，可分别在 .env.development 和 .env.production 中配置，需要注意一点：只有 VITE_ 前缀的环境变量才会被暴露出来

参考文档

• vue-cli 环境变量和模式 🚀 (opens new window)