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

·  阅读 2713

环境变量与模式

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 相反)

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

  1. 首先我们了解下.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)
复制代码
  1. 使用

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

我们使用 staging 模式

  1. 创建 .env文件
# .env
VITE_APP_DIR=dist
VITE_APP_BASE=/test
复制代码
  1. 创建 .env.production文件
# .env.production
VITE_APP_DIR=dist
VITE_APP_BASE=/test
复制代码
  1. 创建 .env.staging文件

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

# .env.staging
NODE_ENV=development
复制代码
  1. 设置 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,
    },
  });
};
复制代码
  1. 设置 package.json

修改 build

"scripts": {
  "dev": "vite",
  "build": "vite build && vite build --mode staging",
  "serve": "vite preview"
},
复制代码

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

分类:
前端
标签:
分类:
前端
标签: