目前, 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'],
},
},