目前, Vite 建议使用模块 js, 比如 .mjs, .mts

配置

配置文件命名: vite.config.mjs

生产与开发

一般来讲, 生产环境和开发环境下使用的环境变量会有所不同

为区分配置环境变量, 我们通常创建三个文件:

• .env 通用环境变量
• .env.development 开发环境变量 (默认加载)
• .env.production 生产环境变量 (vite -m production 指定加载)

详见 .env 文件

.env 文件中需添加 VITE_ 前缀才可被 vite 读取, 比如:

# 可被读取
VITE_BASE_URL = http://test.localhost/

# 不可被读取
DB_PASSWORD = 123456

可通过 import.meta.env.环境变量名 来读取环境 vite 的环境变量:

console.log(import.meta.env.VITE_BASE_URL)

// 无法读取, 结果为 undefined
console.log(import.meta.env.DB_PASSWORD)

一般在构建时, 通过 loadEnv 加载指定环境变量:

vite.config.mjs:

// mode: 为 .env.[mode] 环境模式
export default ({ mode, command }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd())

  // 通过该方式访问环境变量
  env.VITE_BASE_URL
  
  // vite 相关配置
  return defineConfig({...})
}

loadEnv 官方文档

模板

第一种写法:

import { defineConfig } from 'vite';
export default defineConfig({
    // 配置项
})

第二种写法:

/** @type {import('vite').UserConfig} */
export default {
    // 配置项
};

资产模式

build: {
    lib: {
      entry: './index.html',
      formats: ['es', 'cjs'],
    },
  },