vue3.2 vite 配置环境变量

在 Vue3.2 和 Vite 中配置环境变量有两种方法：

1. 在项目根目录下新建 `.env` 文件

在 `.env` 文件中定义环境变量，例如：

VITE_API_URL=https://api.example.com

在 `vite.config.js` 文件中可以通过 `import.meta.env` 访问到这些环境变量，例如：

export default {
  build: {
    sourcemap: true
  },
  server: {
    port: 3000
  },
  plugins: [],
  define: {
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false,
    'process.env.API_URL': JSON.stringify(import.meta.env.VITE_API_URL)
  }
}

在代码中可以通过 `process.env.API_URL` 访问到环境变量的值。

2. 在项目根目录下新建 `.env.[mode]` 文件

在 `.env.[mode]` 文件中定义环境变量，`[mode]` 表示环境模式，例如 `.env.development` 表示开发环境下的环境变量。

在 `vite.config.js` 文件中可以通过 `import.meta.env.MODE` 获取当前环境模式，例如：

export default {
  build: {
    sourcemap: true
  },
  server: {
    port: 3000
  },
  plugins: [],
  define: {
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: false,
    'process.env.API_URL': JSON.stringify(import.meta.env.MODE === 'production' ? 'https://api.example.com' : 'http://localhost:8000')
  }
}

在代码中可以通过 `process.env.API_URL` 访问到环境变量的值。