环境变量
- 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
}
}
}
})