在src同级目录创建
(1).env.delelopment : 开发模式时调用
(2).env.production :生产模式时调用
(3).env.testing : 测试模式时调用
# 页面标题
VITE_APP_TITLE = 若依管理系统
# 生产环境配置
VITE_APP_ENV = 'production'
# 若依管理系统/生产环境
VITE_APP_BASE_API = '/prod-api'
# 是否在打包时开启压缩,支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip
.env.xxx文件与package.json间的关联
(1)dev 与 .env.development 相关
(2)build:prod 与 .env.production 相关
(3)build:stage 与 .env.staging 相关
(自定义.env.后缀)"build:stage": "vite build --mode staging",
"scripts": {
"dev": "vite",
"build:prod": "vite build",
"build:stage": "vite build --mode staging",
"preview": "vite preview"
},
调用依据:
当输入命令为 yarn dev 时 mode == "delelopment "
当输入命令为 yarn build:prod 时 mode == "production"
当输入命令为 yarn build:stage 时 mode == "staging"
vite 中:
默认情况下,开发服务器 (dev
命令) 运行在 development
(开发) 模式,而 build
命令则运行在 production
(生产) 模式。
webpack 中:
如果没有设置,webpack 会给 mode
的默认值设置为 production
。
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd())
// 生产环境判断
const isEnvProduction = mode === 'production';
...
axios请求配置baseURL
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: import.meta.env.VITE_APP_BASE_API,
// 超时
timeout: 30000
})