Vue3-Vite3-多环境配置---基于-vite-创建-vue3-全家桶项目(续篇）

2.2 添加环境文件

环境文件命名如下;

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载;但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载;但会被 git 忽略

不同环境的变量可以定义在 .env.[mode] 文件中;如 .env.dev、.env.prod 等;如果 .env 文件和 .env.[mode] 中有相同的 key;后者定义的值会覆盖前者。

这里咱们以三个环境为例编写 demo;分别是;

在上面指定的环境文件目录 env 下创建上面三个文件;以及所有情况下都会加载的 .env 文件。四个文件内容如下;

.env 文件

VITE_BASE_API=/api
VITE_APP_NAME=;demo app;
DEMO_STR=hello

.env.dev 文件

VITE_BASE_API=/dev-api

.env.uat 文件

VITE_BASE_API=/uat-api

.env.prod 文件

VITE_BASE_API=/prod-api

四个文件都定义了变量 VITE_BASE_API;.env 中还额外定义了 VITE_APP_NAME 和 DEMO_STR 两个变量。

使用 yarn dev:dev 启动服务;或者先使用 yarn build:dev 打包;再通过 yarn preview 预览打包结果;浏览器中都会输出 VITE_BASE_API 和 VITE_APP_NAME 的值。VITE_BASE_API 值为 .env.dev 中定义的 /dev-api;VITE_APP_NAME 值为 .env 中定义的 demo app;但是 .env 中定义的 DEMO_STR 不会输出。由此可以看出;

有兴趣的朋友可以再添加 .env.dev.local 文件进行测试;.env.[mode].local 优先级最高。

3 TypeScript 提示

我使用的 IDE 是 WebStorm;之前在 main.ts 中将 import.meta.env 赋值给变量 env;

const env = import.meta.env

/// <reference types=;vite/client; />

interface ImportMetaEnv {
  readonly VITE_BASE_API: string;
  readonly VITE_APP_NAME: string;
}

// eslint-disable-next-line no-unused-vars
interface ImportMeta {
  readonly env: ImportMetaEnv
}

define: {
  ;process.env;: loadEnv(env.mode, process.cwd(), ;;)
}