vue3+vite+ts怎么配置多环境

在 Vue3 + Vite + TypeScript 中，可以通过在项目根目录下创建不同的环境变量文件来配置多环境。具体步骤如下：

1. 在项目根目录下创建 `.env.development`、`.env.production` 等环境变量文件，分别对应不同的环境。

2. 在环境变量文件中定义需要配置的变量，例如：

   VITE_APP_TITLE=My App (Development)

3. 在代码中使用 `import.meta.env` 来访问环境变量，例如：

   console.log(import.meta.env.VITE_APP_TITLE)

4. 在 `vite.config.ts` 中使用 `define` 函数来指定当前环境变量文件，例如：

   import { defineConfig } from 'vite'

   export default defineConfig({
     define: {
       'process.env': {},
     },
   })

在 `process.env` 中指定当前环境变量文件，例如：

   import { defineConfig } from 'vite'

   export default defineConfig({
     define: {
       'process.env': {
         VITE_ENV_FILE: JSON.stringify('.env.development'),
       },
     },
   })

这样，在开发时就会使用 `.env.development` 文件中的变量，而在生产环境中则会使用 `.env.production` 文件中的变量。