vite多环境配置

需求

使用vite+vue3开发时，项目需要将环境分为不同的端。各个端之间接口地址、业务逻辑、项目打包目录等有区别。所以生产环境配置需要区分开来，以实现不同端的区别。

实现

1、添加配置文件

# .env.user
# 接口请求地址前缀
VITE_APP_API_PREFIX = /api

# 删除 console 代码
VITE_DROP_CONSOLE = true

# 生产环境配置文件名称
VITE_GLOB_CONFIG_FILE_NAME = app.config.js

# 打包生成目录
VITE_OUTPUT_DIR = user

# 平台
VITE_PLATFORM = user

# 重定向路径
VITE_REDIRECT_INDEX = "/index"

# .env.admin
# 接口请求地址前缀
VITE_APP_API_PREFIX = /admin-api

# 删除 console 代码
VITE_DROP_CONSOLE = true

# 生产环境配置文件名称
VITE_GLOB_CONFIG_FILE_NAME = app.config.js

# 打包生成目录
VITE_OUTPUT_DIR = admin

# 平台
VITE_PLATFORM = expert

# 重定向路径
VITE_REDIRECT_INDEX = "/home"

# .env.admin
# 接口请求地址前缀
VITE_APP_API_PREFIX = /expert-api

# 删除 console 代码
VITE_DROP_CONSOLE = true

# 生产环境配置文件名称
VITE_GLOB_CONFIG_FILE_NAME = app.config.js

# 打包生成目录
VITE_OUTPUT_DIR = expert

# 平台
VITE_PLATFORM = expert

# 重定向路径
VITE_REDIRECT_INDEX = "/home"

2、配置package.json

"scripts": {
    "dev": "vite",
    "build:admin": "vue-tsc --noEmit && vite build",
    "build:user": "vue-tsc --noEmit && vite build --mode user",
    "build:expert": "vue-tsc --noEmit && vite build --mode expert",
    "build": "npm run build:admin && npm run build:user && npm run build:expert",
},

3、在项目中使用

const baseUrl = import.meta.env.VITE_APP_API_PREFIX;

知识点

1. vite build --mode user中的user对应配置文件文件名中的.env.user，该配置文件中的配置项会覆盖.env文件的配置项。

2. 为了防止意外地将一些环境变量泄露到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

3. Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：

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