Vite项目中如何正确使用环境变量

小宁子呀
936 阅读2分钟

一. 先配置好相关代码来测试一下

这里用不同的值来做区分

image.png

二. 为什么 dev111 出现在了两个地方？

因为Vite会按照 --mode 后跟随的值，去加载对应的 .env.[mode] 这个文件，所以这里必须保持一致，否则它会拿不到对应的配置项，影响使用环境判断代码的正确性

image.png

三. 查看打印结果

image.png

image.png

四. 不同的运行环境中获取环境变量

  • 浏览器环境( js、ts、vue 等业务运行文件)

    • 获取环境变量通过以下语句
    import.meta.env
    • 可以获取到的内容如下：
    {
    BASE_URL: "/",
    DEV: true,
    MODE: "dev111",
    PROD: false,
    SSR: false,
    VITE_APP_BASEURL: "https://xxx.xxx.xxx",
    VITE_APP_MODE: "dev333",
    VITE_USER_NODE_ENV: "dev222"
}

  • NodeJS环境( vite.config 服务端运行文件)

    • 获取环境变量需要借助loadEnv方法，传入解构出来的mode参数即可
    import { defineConfig, loadEnv } from 'vite'
export default ({mode}) => {
  const env = loadEnv(mode, process.cwd())
  console.log(env) // 打印
  return defineConfig({})
}
    • 可以获取到的内容如下：
    {
  VITE_USER_NODE_ENV: 'dev222',
  VITE_APP_MODE: 'dev333',
  VITE_APP_BASEURL: 'https://xxx.xxx.xxx'
}

五. import.meta.env

  • import.meta.env.MODE: {string} 应用运行的模式

    • 对应了scripts命令--mode后跟随的值

    • 同时也是.env.[mode]文件名中的mode

  • import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base配置项决定

  • import.meta.env.DEV: {boolean} 是否是开发环境(本地服务环境)

  • import.meta.env.PROD: {boolean} 是否是生产环境(打包后的代码)

  • import.meta.env.SSR: {boolean} 是否是SSR服务端渲染

  • import.meta.env.VITE_APP_MODE: {string}

    • 取值于env配置文件中的VITE_APP_MODE字段

    • 我们可以用这个变量在业务代码中判断当前环境

  • import.meta.env.VITE_USER_NODE_ENV: {string}

    • 这个变量比较特殊，因为我们根本没有对它声明或赋值

    • 解释一下：它是Vite特殊处理过的变量，取值于env配置文件的NODE_ENV字段

    • 也就是说：Vite项目想要使用NODE_ENV,使用VITE_USER_NODE_ENV就可以了

六. 最后再看一个代码测试

绿色区域内容不变，注意红框内代码效果

image.png

再看打印结果

image.png

上结论：

可以在env配置文件中配置NODE_ENV供VITE_APP_MODE取值，但我们不要在项目中使用或调用process.env.NODE_ENV

为什么？

  1. process.env.NODE_ENV 指的是当前环境的 Node.js 运行时的环境变量，通常用于区分开发、测试、生产等不同环境。而在这里打印出来的却是--mode指令后跟随的值
  2. process.env.NODE_ENV 和 env 文件中配置的 NODE_ENV不同意却同名，容易让人搞不清楚

那用什么来判断环境？

上面说过，用import.meta.env就行了

avatar
文章
阅读
粉丝