官网总是写的那么含蓄，默认我们不是萌新。
https://cn.vitejs.dev/guide/env-and-mode.html#env-variables
环境变量的运行环境
环境变量其实有两种原型环境：浏览器、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_ 开头
好绕圈圈呀。好像没说清楚，因为我也没绕出来。
