【Vue3】env环境变量的配置和使用（区分cli和vite）

在Vue 3项目中，环境变量的配置和使用可以通过不同的工具链来实现。以下是在Vue CLI和Vite中配置和使用环境变量的方法。

在Vue CLI项目中配置和使用环境变量：

1. 在项目根目录下创建.env文件，用于设置所有环境共同的变量。
2. 创建.env.local文件，用于设置本地特有的环境变量。
3. 创建.env.[mode]文件，例如.env.production，用于设置特定模式下的环境变量。

例如：

// .env
VUE_APP_API_URL=https://api.example.com
 
// .env.local
VUE_APP_SECRET_CODE=secret
 
// .env.production
VUE_APP_API_URL=https://api.prod.com

4. 在代码中通过process.env访问这些变量。

console.log(process.env.VUE_APP_API_URL); // 输出：https://api.example.com
console.log(process.env.VUE_APP_SECRET_CODE); // 输出：secret

在Vite项目中配置和使用环境变量：

1. 在项目根目录下创建vite.config.js，并使用define配置环境变量。
2. 在代码中通过import.meta.env访问这些变量。

例如：

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  define: {
    'process.env': process.env
  }
});

// 在组件中
console.log(import.meta.env.VITE_API_URL); // 输出：https://api.example.com

3. 在.env文件中设置环境变量。

// .env
VITE_API_URL=https://api.example.com

注意：Vite项目中访问环境变量的方式是import.meta.env而不是process.env。

以上是配置和使用环境变量的基本方法，具体实现可能会根据项目的具体需求和Vue CLI或Vite的版本有所不同。