vite-配置环境变量env

项目中使用

根目录下新建文件

.env.dev

.env.development

.env.pro

写法一：vite项目 VITE_ 开头

未指定时变量必须使用 VITE_ 开头，否则无法读取

开发环境

# just a flag
NODE_ENV = "development"
# base api
VITE_BASE_API = 'http://localhost:8101'

生产环境

NODE_ENV = "production"
VITE_BASE_API = 'http://119.91.31.238:8101/'

写法二：自定义 开头

如果不想使用默认的 VITE_ 开头，则需要配置 vite.config.ts 中的 envPrefix

vite中修改vite.config.ts

1. vite.config.ts添加 envPrefix:"APP_"

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
  plugins: [ ],
  envPrefix:"APP_",
});

tsconfig.json添加

2. tsconfig.json中添加 "types": ["vite/client"] ，用来提供import.meta.env 上 Vite 注入的环境变量的类型定义

配置变量提示

3. 配置env.d.ts文件

interface ImportMetaEnv {
  readonly APP_BASE_API: string;
  // 更多环境变量...
}

使用

4. 使用环境变量

console.log(import.meta.env.APP_BASE_API) 
// 可以打印import.meta.env 查看里面的具体数据
console.log(import.meta.env)

[必须]package.json配置模式

"scripts": {
    "serve": "vite",   // 未指定模式的默认取 .env.development 文件中的配置
    "dev": "vite --mode dev",   // 取 .env.dev文件中的配置
    "stg": "vite --mode stg",  // 取 .env.stg文件中的配置
    "pro": "vite --mode pro",   // 取 .env.pro文件中的配置
    "build": "vue-tsc --noEmit && vite build",    // 未指定模式的默认取 .env.development 文件中的配置
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",    // build的时候取dev的配置
    "build:stg": "vue-tsc --noEmit && vite build --mode stg",      // build的时候取stg的配置
    "build:pro": "vue-tsc --noEmit && vite build --mode pro", 	// build的时候取pro的配置
    "preview": "vite preview"
  },

使用案例

// 创建一个 axios 实例
const service = axios.create({
  baseURL: import.meta.env.APP_BASE_API,

  timeout: 60000, // request timeout
  withCredentials: true, // 异步请求携带cookie
  headers: {
    "Content-Type": "application/json",
    Authorization: getToken(),
    "X-Requested-With": "XMLHttpRequest",
  },
});

node中使用(vite.config.ts)

node环境中不能通过 import.meta.env 去获得环境变量，需要使用 process.env 获取

仅支持VITE_ 开头

vite中引入loadEnv包loadEnv

import { defineConfig ,loadEnv } from "vite";

修改结构

//vite.config.ts
import { fileURLToPath, URL } from 'node:url'

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default ({mode}:any) => {
  console.log(mode); // 当前运行模式
  console.log(loadEnv(mode,process.cwd()).VITE_BASE_API);// 获取VITE_BASE_API

  return defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  })
}