vite根据环境变量与模式打包项目

环境变量与模式

Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。

import.meta.env.MODE: string 应用运行基于的模式。
import.meta.env.BASE_URL: string 应用正被部署在的 base URL。它由 base 配置项决定。
import.meta.env.PROD: boolean 应用是否运行在生产环境
import.meta.env.DEV: boolean 应用是否运行在开发环境 (永远与 import.meta.env.PROD 相反)

我们在使用过程中，避免不了使用各种环境的变量，如果我们总是手动修改，对我们的来说很是麻烦，也增加了我们工作量，如果用环境变量就极大的提高了我们的工作效率，下面就跟着我看看下怎么使用吧。

首先我们了解下.env文件

Vite 使用 dotenv 在你的项目根目录下从以下文件加载额外的环境变量:

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

加载的环境变量也会通过 import.meta.env 暴露给客户端源码。

为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

模式

默认情况下，开发服务器 (serve 命令) 运行在 development （开发）模式，而 build 命令运行在 production （生产）模式。

你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想为我们假设的 staging 模式构建应用:

vite build --mode staging

为了使应用实现预期行为，我们还需要一个 .env.staging 文件：

# .env.staging
NODE_ENV=production
VITE_APP_TITLE=My App (staging)

使用

我们实现一个根据环境变量打包不同的问题

我们使用 staging 模式

创建 .env文件

# .env
VITE_APP_DIR=dist
VITE_APP_BASE=/test

创建 .env.production文件

# .env.production
VITE_APP_DIR=dist
VITE_APP_BASE=/test

创建 .env.staging文件

把模式设置为 development 开发环境，build 默认执行 development 环境

# .env.staging
NODE_ENV=development

设置 vite.config.js

我们在 vite.config.js 用 import.meta.env 拿不到环境变量，所以我们要做下处理

# loadEnv源码
export declare function loadEnv(mode: string, envDir: string, prefix?: string): Record<string, string>;

获取如下：

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

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    plugins: [vue()],
    base: process.env.VITE_APP_BASE,
    build: {
      outDir: process.env.VITE_APP_DIR,
    },
  });
};

设置 package.json

修改 build

"scripts": {
  "dev": "vite",
  "build": "vite build && vite build --mode staging",
  "serve": "vite preview"
},

现在在打包你就可以根据你的环境变量设置，打包不同的文件夹以及路径，其他的类型。