官網(wǎng)總是寫的那么含蓄，默認(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 打印出來看看結(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è)小問題，如果只使用console.log('import', import.meta)的話，那么看不到內(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)行在開發(fā)環(huán)境 (永遠(yuǎn)與import.meta.env.PROD相反)。

在node環(huán)境里使用環(huán)境變量

你以為這就完了嗎？并沒有。

當(dāng)我們在 vite.config 里面想打印一下看看結(jié)構(gòu)的話，就會發(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': // 打包庫文件，生成es + umd 格式
      return lib()
      break;
   
    default: // 開發(fā)模式、生產(chǎn)模式
      return project(url)
      break;
  }
}

這樣才可以拿到環(huán)境變量。

設(shè)置環(huán)境變量

這就完了嗎？并沒有，你知道如何設(shè)置環(huán)境變量嗎？

需要我們設(shè)置 .env 文件

• .env # 所有情況下都會加載
• .env.local # 所有情況下都會加載，但會被 git 忽略
• .env.[mode] # 只在指定模式下加載
• .env.[mode].local # 只在指定模式下加載，但會被 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)目，對應(yīng)的是 .env.project 文件。

lib 命令后面的 --mode lib 表示，需要使用 lib模式打包項(xiàng)目，對應(yīng)的是 .env.lib 文件。

這樣我們可以根據(jù)不同的命令，使用不同的模式，加載對應(yīng)的.env文件，得到具體的環(huán)境變量。

.env 文件

VITE_BASEURL=nf-rollup-ui-controller 

需要使用 VITE_ 開頭

好繞圈圈呀。好像沒說清楚，因?yàn)槲乙矝]繞出來。