vue3 vite 怎么配置多环境

在Vue 3和Vite中，可以通过在项目根目录下创建不同的配置文件来实现多环境配置。以下是配置多环境的步骤：

1. 在项目根目录下创建一个名为.env的文件，并添加环境变量。例如，创建.env.development、.env.production和.env.staging文件分别对应开发环境、生产环境和预发布环境，然后在文件中添加相应的环境变量。例如：

.env.development:

VITE_API_BASE_URL=http://localhost:3000/api

.env.production:

VITE_API_BASE_URL=https://api.example.com

.env.staging:

VITE_API_BASE_URL=https://staging-api.example.com

2. 修改vite.config.js配置文件，在define配置项中添加一个import.meta.env的值，用来获取环境变量。例如：

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    'import.meta.env': JSON.stringify(process.env)
  },
});

3. 在代码中使用环境变量。在需要使用环境变量的地方，可以通过import.meta.env来获取环境变量的值。例如：

const apiUrl = import.meta.env.VITE_API_BASE_URL;
console.log(apiUrl);

根据当前的环境变量，apiUrl的值会根据所指定的环境文件中的值而不同。

4. 启动开发服务器。使用npm run dev启动开发服务器时，Vite会自动加载.env.development文件中的环境变量。

5. 构建生产版本。使用npm run build构建生产版本时，Vite会自动加载.env.production文件中的环境变量。

通过这种方式，你可以在不同的环境中使用不同的环境变量，从而实现多环境配置。