网站建设与开发 教材网站建设2019

 在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
})