美文网首页
vue3 vite 环境变量配置

vue3 vite 环境变量配置

作者: 暴躁程序员 | 来源:发表于2023-04-18 16:57 被阅读0次

一、获取默认环境变量

vite 默认的 5 个内置环境变量无法在 .env.development 等配置文件中更改,可以通过运行时配置更改

console.log(import.meta.env);
// {
//   BASE_URL: '/',
//   DEV: true,
//   MODE: 'development',
//   PROD: false,
//   SSR: false
// }

二、自定义环境变量

  1. 环境变量可在任意组件中使用,也可在 vite.config.js 中使用
  2. 定义的环境变量的前缀必须是 VITE_,否则环境变量不生效,此前缀可配置
  3. 如果在所有配置文件名后拼接 .local,那么此配置文件会被 git 忽略,只在本地生效(比如:新建 .env.local 配置文件)

1. 定义开发环境变量

在项目根目录新建 .env.development 配置文件

VITE_HTTP = http://localhost:9000/
VITE_WHO = "I am development"

2. 定义生产环境变量

在项目根目录新建 .env.production 配置文件

VITE_HTTP = http://localhost:8000/
VITE_WHO = "I am production"

3. 定义 sit 环境变量(非内置,需要在package.json中配置)

  1. 在项目根目录新建 .env.sit 配置文件
VITE_HTTP = http://localhost:7000/
VITE_WHO = "I am sit"
  1. 在项目的 package.json 的 scripts 属性中新增 dev:sit
    通过 npm run dev:sit 启动服务查看环境变量
 "scripts": {
    "dev:sit": "vite --mode sit",
  },

4. 定义通用环境变量

在项目根目录新建 .env 配置文件,在所有环境生效,优先级最低

VITE_PUBLIC_TOKEN = "111222333444555666777"

5. 定义通用环境变量,会被 git 忽略

在项目根目录新建 .env.local 配置文件

VITE_PUBLIC_KEY = "aaabbbcccdddeee"

相关文章

网友评论

      本文标题:vue3 vite 环境变量配置

      本文链接:https://www.haomeiwen.com/subject/ubzhjdtx.html