环境变量

• 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 上。

.env文件

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

像webpack一样，可以以不同环境运行对应的全局变量

自定义环境变量

以VITE_为前缀！！
比如

# .env
VITE_SOME_KEY=123

console.log(import.meta.env.VITE_SOME_KEY) // 123

不同模式执行不同的.env文件

vite build加载.env.production

vite build --mode testpdct 加载 .env.testpdct 的文件

而且在运行的时候，import.meta.env.MODE的值为testpdct，这样就可以区分开发生产测试的环境了

preview 预上线模式

vite preview --port 4173就是将dist的文件以本机的模式进行运行模拟一遍，可以用来模拟上线或者测试的环境，从而减少真正要去生产环境验证的步骤

开发代理

export default defineConfig({server: {proxy: {// 字符串简写写法'/foo': 'http://localhost:4567',// 选项写法'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')},// 正则表达式写法'^/fallback/.*': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/fallback/, '')},// 使用 proxy 实例'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,configure: (proxy, options) => {// proxy 是 'http-proxy' 的实例}},// Proxying websockets or socket.io'/socket.io': {target: 'ws://localhost:3000',ws: true}}}
})