官網(wǎng)總是寫(xiě)的那么含蓄，默認(rèn)我們不是萌新。
https://cn.vitejs.dev/guide/env-and-mode.html#env-variables
環(huán)境變量的運(yùn)行環(huán)境
環(huán)境變量其實(shí)有兩種原型環(huán)境：瀏覽器谚中、node饰恕。
在瀏覽器環(huán)境里使用環(huán)境變量
在.js、.ts墓陈、.vue里面使用環(huán)境變量恶守，其實(shí)是在瀏覽器里運(yùn)行，我們可以直接用 console.log 打印出來(lái)看看結(jié)構(gòu)：
console.log('import', import.meta)
console.log('import.url', import.meta.env.BASE_URL)
console.log('import.env.MODE', import.meta.env.MODE)
但是有個(gè)小問(wèn)題贡必，如果只使用
console.log('import', import.meta)的話(huà)兔港，那么看不到內(nèi)部結(jié)構(gòu)。
- import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式仔拟。
- import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 URL衫樊。他由base 配置項(xiàng)決定。
- import.meta.env.PROD: {boolean} 應(yīng)用是否運(yùn)行在生產(chǎn)環(huán)境利花。
- import.meta.env.DEV: {boolean} 應(yīng)用是否運(yùn)行在開(kāi)發(fā)環(huán)境 (永遠(yuǎn)與import.meta.env.PROD相反)科侈。
在node環(huán)境里使用環(huán)境變量
你以為這就完了嗎？并沒(méi)有晋被。
當(dāng)我們?cè)?vite.config 里面想打印一下看看結(jié)構(gòu)的話(huà)兑徘，就會(huì)發(fā)現(xiàn)，看不到羡洛。
那么要如何正確使用呢挂脑？需要用的 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': // 打包庫(kù)文件，生成es + umd 格式
return lib()
break;
default: // 開(kāi)發(fā)模式欲侮、生產(chǎn)模式
return project(url)
break;
}
}
這樣才可以拿到環(huán)境變量崭闲。
設(shè)置環(huán)境變量
這就完了嗎？并沒(méi)有威蕉，你知道如何設(shè)置環(huán)境變量嗎刁俭？
需要我們?cè)O(shè)置 .env 文件
- .env # 所有情況下都會(huì)加載
- .env.local # 所有情況下都會(huì)加載，但會(huì)被 git 忽略
- .env.[mode] # 只在指定模式下加載
- .env.[mode].local # 只在指定模式下加載韧涨，但會(huì)被 git 忽略
然后在package 里面設(shè)置mode
"scripts": {
"dev": "vite",
"build": "vite build --mode project",
"lib": "vite build --mode lib",
"libdts": "vue-tsc --declaration --emitDeclarationOnly ",
},
build 命令后面的 --mode project 表示牍戚，需要使用 project 模式打包項(xiàng)目，對(duì)應(yīng)的是 .env.project 文件虑粥。
lib 命令后面的 --mode lib 表示如孝，需要使用 lib模式打包項(xiàng)目，對(duì)應(yīng)的是 .env.lib 文件娩贷。
這樣我們可以根據(jù)不同的命令第晰，使用不同的模式，加載對(duì)應(yīng)的.env文件，得到具體的環(huán)境變量茁瘦。
.env 文件
VITE_BASEURL=nf-rollup-ui-controller
需要使用 VITE_ 開(kāi)頭
好繞圈圈呀品抽。好像沒(méi)說(shuō)清楚，因?yàn)槲乙矝](méi)繞出來(lái)甜熔。
