vue3 - 28.Vue环境变量

在Vue 3中，环境变量通常用于配置不同环境下的不同行为。Vue 3项目中，环境变量可以通过不同的模式（mode）来区分，例如开发环境（development）和生产环境（production）。

1. 创建环境变量文件：

在Vue 3项目中，你可以在项目根目录下创建.env、.env.local、.env.[mode]和.env.[mode].local文件来定义环境变量。

• .env：全局默认配置，所有的环境都会加载。
• .env.local：全局默认配置的本地覆盖，不会被git提交。
• .env.[mode]：特定模式下的配置，例如.env.development和.env.production。
• .env.[mode].local：特定模式下的本地配置覆盖，不会被git提交。

2. 设置环境变量：

在这些文件中，你可以设置环境变量，例如：

# .env.development
VUE_APP_API_URL=https://dev.example.com
 
# .env.production
VUE_APP_API_URL=https://prod.example.com

3. 使用环境变量：

在Vue 3应用中，你可以通过process.env来访问这些环境变量，例如：

// 在你的Vue组件或者其他地方
created() {
  console.log(process.env.VUE_APP_API_URL); // 输出对应模式下的API URL
}

请注意，所有Vue 3项目中以VUE_APP_开头的环境变量都可以在应用代码中通过process.env访问。

以上是Vue 3项目中使用环境变量的基本方法。