vue全家桶进阶之路49:Vue3 环境变量
vue3 环境变量
在Vue3中,可以通过环境变量来管理应用程序中的配置。这些配置可以包括后端API的URL、API key、跟踪ID等等。在不同的开发、测试、生产环境中使用不同的配置是非常有用的。Vue3允许使用.env
、.env.local
、.env.[mode]
和.env.[mode].local
文件来设置环境变量。
以下是环境变量的配置步骤:
- 创建环境变量文件
首先,需要在项目的根目录下创建.env
文件,定义应用程序的环境变量,例如:
VUE_APP_BASE_URL=http://localhost:3000 VUE_APP_API_KEY=1234567890
其中,以VUE_APP_
开头的变量是Vue3预定义的变量,可以在应用程序中通过process.env.VUE_APP_XXX
来引用它们,例如process.env.VUE_APP_BASE_URL
和process.env.VUE_APP_API_KEY
。
- 创建模式文件
除了.env
文件之外,还可以在项目根目录下创建.env.[mode]
文件,其中[mode]
表示开发模式、测试模式、生产模式等。例如,可以创建.env.development
文件来定义开发模式下的环境变量。
- 引用环境变量
在Vue3应用程序中,可以通过process.env.VUE_APP_XXX
来引用环境变量。例如,在组件中引用VUE_APP_BASE_URL
:
export default { created() { const baseUrl = process.env.VUE_APP_BASE_URL console.log(baseUrl) } }
这段代码的作用是在组件创建时,获取VUE_APP_BASE_URL
环境变量并输出到控制台。
- 区分不同的环境
Vue3还允许通过process.env.NODE_ENV
来判断当前的环境是开发、测试还是生产环境。在开发模式下,NODE_ENV
的值为development
,在生产模式下,NODE_ENV
的值为production
。例如,可以根据当前环境来输出不同的调试信息:
if (process.env.NODE_ENV === 'development') { console.log('This is a development environment.') } else if (process.env.NODE_ENV === 'production') { console.log('This is a production environment.') }
总结:
在Vue3中使用环境变量可以方便地管理应用程序中的配置,例如后端API的URL、API key等等。通过.env
、.env.local
、.env.[mode]
和.env.[mode].local
文件来设置环境变量,并可以通过process.env.VUE_APP_XXX
来引用它们。同时,可以通过process.env.NODE_ENV
来判断当前的环境是开发、测试还是生产环境。