Vite 配置环境变量和模式Vite 配置环境变量（.env）和模式，在不同场景（开发、测试、生产）中的运用。根据场景动

官网参考网址：环境变量和模式 | Vite 官方中文文档 (vitejs.cn)

若想直接看如何创建，跳这【创建 .env 相关文件】

环境变量¶

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

`.env` 文件¶

Vite 使用 dotenv 从你的环境目录中的下列文件加载额外的环境变量：

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

注意：若有改动，需重启后才生效！！！

环境加载优先级

一份用于指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。

变量命名规则

以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。也可以自定义变量前缀，可以参考envPrefix

示例：

# .env 文件
NODE_MODE=development
VITE_SERVER_PORT=3001

输出：

console.log(import.meta.env.NODE_MODE); // undefine 
console.log(import.meta.env.VITE_SERVER_PORT); // 3001

创建 .env 相关文件

在根目录下创建 .env 相关文件，可考虑实际情况创建文件（例如：开发、测试、生产等）。

.env
.env.development
.env.production

.env

# 通用配置
VITE_APP_TITLE=系统名称（后续需求替换）
VITE_APP_VERSION=0.0.1

.env.development

# .env.development 开发环境
VITE_NODE_MODE=development

# 接口服务信息
VITE_API_PROXY_PORT=18089
VITE_API_PROXY_TARGET=http://localhost
VITE_API_PROXY_PREFIX=api(可有可无)

VITE_BASE_URL=baseurl

# 根据场景需求添加 ...

.env.production

# .env.production 生产环境
VITE_NODE_MODE=production

# 接口服务信息
VITE_API_PROXY_PORT=生产接口端口
VITE_API_PROXY_TARGET=http://生产接口 ip
VITE_API_PROXY_PREFIX=api(可有可无)

VITE_BASE_URL=baseurl

# 根据场景需求添加 ...

若有自定义的模式 staging，那么对应的环境变量文件为 .env.staging。创建完就可以在任何场景使用变量，感兴趣可以接着往下看

注意：除了通用环境变量文件（.env）外，若不同场景变量不一致的情况下，变量名称一定得一致，否则后续会找不到该变量。

配置 package.json 文件

在 package.json 文件修改启动服务方式，换句话说就是指定启动模式。

通过 --mode 模式名称 指定启动模式。如下所示：

{
    "scripts": {
        "dev": "vite --mode development",
        "build": "vite build --mode production",
        "lint": "eslint .",
        "preview": "vite preview"
   },
}

若有自定义的模式 staging，那么对应的服务启动命令为 vite --mode staging

配置 vite.config.ts 文件

需要在配置文件中使用 vite 自带的 loadEnv() 来获取 .env 相关文件信息

mode：启动模式
process.cwd()：返回当前 Node 进程执行的目录

// vite.config.ts 文件
// 以下代码是以 react 为基础的，vue 也大差不差的。主要是看怎么配置和使用环境变量
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';

// https://vite.dev/config/
export default defineConfig(({ command, mode }) => {
    // 获取.env文件里定义的环境变量
    const env = loadEnv(mode, process.cwd(), '');

    return {
        base: env.VITE_BASE_URL, // 默认'/'，可自定义。在路由中：http://localhost:3001/baseurl/
        plugins: [react()],
        server: {
            host: '0.0.0.0', // 主机名
            port: 3001, // 端口号
            strictPort: true, // 端口被占用时，是否停止服务
            open: true, // 启动服务时是否自动打开浏览器
        },
        resolve: {
            alias: {
                // 别名配置
                '@': resolve(__dirname, './src'),
                '@pages': resolve(__dirname, './src/pages'),
                '@assets': resolve(__dirname, './src/assets'),
                '@components': resolve(__dirname, './src/components'),
            },
        },
        build: {
            outDir: 'dist', // 打包后的文件存放位置，默认dist
            emptyOutDir: true, // 打包后是否删除 dist 文件夹
        },
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler', // 解决废弃警告
                },
            },
        },
    };
});

Vite 配置环境变量和模式