环境变量的运行环境

环境变量其实有两种原型环境：浏览器、node。

在浏览器环境里使用环境变量

在.js、.ts、.vue里面使用环境变量，其实是在浏览器里运行，我们可以直接用 console.log 打印出来看看结构：

console.log('import', import.meta)
console.log('import.url', import.meta.env.BASE_URL)
console.log('import.env.MODE', import.meta.env.MODE)

但是有个小问题，如果只使用console.log('import', import.meta)的话，那么看不到内部结构。

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

在node环境里使用环境变量

你以为这就完了吗？并没有。

当我们在 vite.config 里面想打印一下看看结构的话，就会发现，看不到。

那么要如何正确使用呢？需要用的 loadEnv

import { defineConfig, loadEnv } from 'vite'

export default (opt: any) => {

  const { mode } = opt
  const url = loadEnv(mode, process.cwd()).VITE_BASEURL
  switch (url) {
    case 'lib': // 打包库文件，生成es + umd 格式
      return lib()
      break;
   
    default: // 开发模式、生产模式
      return project(url)
      break;
  }
}

这样才可以拿到环境变量。

设置环境变量

这就完了吗？并没有，你知道如何设置环境变量吗？

需要我们设置 .env 文件

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

然后在package 里面设置mode

  "scripts": {
    "dev": "vite",
    "build": "vite build --mode project",
    "lib": "vite build --mode lib",
    "libdts": "vue-tsc --declaration --emitDeclarationOnly ",
  },

build 命令后面的 --mode project 表示，需要使用 project 模式打包项目，对应的是 .env.project 文件。

lib 命令后面的 --mode lib 表示，需要使用 lib模式打包项目，对应的是 .env.lib 文件。

这样我们可以根据不同的命令，使用不同的模式，加载对应的.env文件，得到具体的环境变量。

.env 文件

VITE_BASEURL=nf-rollup-ui-controller

需要使用 VITE_ 开头

好绕圈圈呀。好像没说清楚，因为我也没绕出来。