如何在vite项目中配置环境及环境变量

首先需要创建环境文件,这里我只创建了两个环境: 开发环境和生产环境;

在根目录下创建 .env.development 文件,此文件为开发环境,
创建 .env.production 文件,此文件为生产环境,

在文件内写入参数;

此处参数后面可以读取到 可以设置常用的 key/密匙/环境端口/环境变量 等内容

然后开始配置 package.json 文件;

首先设置 dev 为开发环境启动,
设置 server 为生产环境启动,
设置 --mode 可更改环境配置,

然后开始配置 vite.config.ts 文件;

顶部新增引入

import { defineConfig, loadEnv } from "vite"; // loadEnv 新增引入

然后改变原文件代码

// export default defineConfig {
// 	plugins: [vue()],
// }
// 改为函数形式:
export default defineConfig {({command, mode, ssrBuild })={
    const env = loadEnv(mode, process.cwd()); // 使用loadEnv获取当前环境配置
    console.log(env); // 这里就是读取的 .env 文件内设置的参数 
    // env = {VITE_ENV: 'development', VITE_PORT: '8080', VITE_BASE_API: '/dev-api'}
    return {
            // 此处需要返回一个对象
            plugins: [vue()],
    }
}