vite.config.js 添加语法提示功能：

方法1：

import { defineConfig } from 'vite'

export default definedConfig({
    // ...
})

方法2：

/** @type{import('vite').UserConfig} */
export default {
  // ...
}

情景配置

方式记录：

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

command 可以选值：build | serve
开发环境：command === serve
生产环境：command === build
也就是：
$ vite build => command === build
$ vite dev | vite serve | vite => command === serve

配置示例：

import { defineConfig } from "vite";
import ViteBaseConfig from "./vite.base.config";
import ViteDevConfig from "./vite.dev.config";
import ViteProdConfig from "./vite.prod.config";
import viteBaseConfig from "./vite.base.config";

// 策略模式环境处理
const envResolver = {
  build: () => {
    console.log("-> 生产环境");
    return ({ ...ViteBaseConfig, ...ViteProdConfig })
  },
  "serve": () => {
    console.log("-> 开发环境");
    return ({ ...ViteBaseConfig, ...ViteDevConfig })
  }
}

export default defineConfig(({ command, mode, ssrBuild }) => {
  console.log('-> ',command)
  return envResolver[command]()
})

环境变量配置

环境变量可以从 process.env 获取；

vite 通过使用 dotenv 和 dotenv-expand 两个库来做到将变量添加到 process.env 中的，dotenv 和 dotenv-expand 这两个库的规范同样适用于 vite工程中的 .env 文件配置；如：.env 文件中的变量的使用；

vite 默认不加载 .env 文件, 因为这些文件是在执行完 vite 配置文件之后方可确定要加载哪一个；

如果确定需要加载环境文件，可以通过 vite 导出的 loadEnv函数来加载指定的.env 文件；

涉及到的 vite.config.js 中的配置：

root:

项目根目录（index.html 文件所在的位置）。可以是一个绝对路径，或者一个相对于该配置文件本身的相对路径。
envDir:

用于加载 .env 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。
envPrefix:

以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的 客户端 源码中。

类型  `string | string[]`
默认： `VITE_`

安全注意事项：
`envPrefix` 不应被设置为空字符串 `''`，这将暴露你所有的环境变量，导致敏感信息的意外泄漏。 
检测到配置为 `''` 时 Vite 将会抛出错误.

涉及到的 vite 方法：

loadEnv:

function loadEnv(
  mode: string,
  envDir: string,
  prefixes: string | string[] = 'VITE_',
): Record<string, string>

// 参数解释：
> mode: 当前工程的启动模式
> envDir: 指定 `.env` 文件的位置，默认：是 vite.config.js 中 `envDir` 配置；
> prefixes: 指定加载变量的前缀；默认：`VITE_`; 如果想环境文件中的变量都加载的话，可设置 `prefixes`参数为 ’‘；

loadEnv 是 编译阶段 获取环境文件中定义的常量的方法；
可配合 define 配置，做 全局常量 的替换；

示例代码：

// vite.config.js

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  
    const env = loadEnv(mode, process.cwd(), '') // 读取 .env.[mode] 文件
    console.log('env -> ', env)

    // $ npm run build --mode test // 指定 mode 为 test
    // const env = loadEnv('test', process.cwd(), '') // 读取 .env.test 文件
    // console.log('env -> ', env)

  return {
    // vite 配置
    define: { // 定义全局常量替换方式
      __APP_ENV__: env.APP_ENV, // 如果：APP_ENV=development
    },
  }
})

// main.js
console.log(__APP_ENV__) // development

自定义环境文件：

.env// 所有模式都会加载
.env.local // 所有模式都会加载，但会被git忽略
.env.[mode].local // 只有指定的模式会加载，但会被git忽略
.env.[mode] // 只有指定模式会加载，注意 .env.production 文件优先级比 .env 文件优先级要高

配置环境模式：

vite.config.js 中 mode 属性指定；
命令行中指定，如：vite server --mode production, mode 为 production;
vite 中默认命令中指定的 mode:
1. vite 和 vite serve -> mode 为 development
2. vite build -> mode 为 production
3. vite preview -> mode 为 prodution
【注】：优先级：
1. 命令行 --mode > vite.config.js 中 mode 属性 > vite serve 默认 mode、vite build默认 mode
2. vite preview 默认 mode > vite.config.js 中 mode 属性

特殊对象 import.meta

说以下这个 vite 提供的特殊对象 import.meta：

import.meta将上下文的元数据暴露给JavaScript模块, 它暴露了三个属性：env(环境变量)，resolve, url(当前模块)；

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL.

DEMO:

// 1.
const imgUrl = new URL('./img.png', import.meta.url).href

// HTML
<script type="module">
  import "./index.mjs?someURLInfo=5";
</script>


// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5

import.meta.resolve 使用当前模块的URL作为基，将模块说明符解析为URL。

DEMO:

// Script at https://example.com/main.js

const helperPath = import.meta.resolve("./lib/helper.js");
console.log(helperPath); // "https://example.com/lib/helper.js"

import.meta.env Vite 在这个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

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相反)。
import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

【注】：

它是在所有情况下都可以使用的内建变量；如：SSR \ 客户端情景逻辑判断时的应用；
此变量在编译过程中走的静态替换逻辑，所以只能是import.meta.env.BASE_URL而不能是import.meta.env[BASE_URL];

Vite 配置 - 基础

vite.config.js 添加语法提示功能：

情景配置

环境变量配置

特殊对象 import.meta