如何在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()],
  }
  }