JZTXT

环境变量与模式

发布时间 2023-07-02 17:26:27作者: yunChuans

前言

vite.config.js是运行在node环境下的，vite会将esmodule转化为commonjs。

服务端区分环境

dotenv

vite内置了dotenv这个第三方库，他会自动读取.ev文件，并将其注入到process对象下。
但是 Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

.env.development

KEY = 111
VITE_BASEURL = 'http://wangwu.com'

.env.produvtion

KEY = 222
VITE_BASEURL = 'http://lisi.com'

vite.config.js

import { defineConfig, loadEnv } from 'vite'
//process.cwd() 返回当前node进程的工作目录
//mode根据你敲的命令，development（dev）或者production(build)
export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。（可以自己设置环境变量文件名）
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: env.APP_ENV,
    },
  }
})

客户端环境变量

大体上和服务端差不多，但是变量默认必须以 VITE_ 开头，当然你也可以在配置中修改默认开头。
通过 import.meta.env即可取得环境变量。

模式

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

这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量：

# .env.production
VITE_APP_TITLE=My App

在你的应用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染标题。

在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如，如果你想在 staging （预发布）模式下构建应用：

vite build --mode staging

或者你想新开一个环境，比如测试环境，你也可以这样做。
在package.js中

"test":"vite --mode test"
直接运行 npm run test
还需要新建一个 .env.staging 文件：

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

由于 vite build 默认运行生产模式构建，你也可以通过使用不同的模式和对应的 .env 文件配置来改变它，用以运行开发模式的构建：

# .env.testing
NODE_ENV=development