在前端开发中，我们经常需要根据不同的环境配置不同的变量，比如开发环境、测试环境、生产环境等。在 Vue.js 中，我们可以使用 vue-dotenv 这个插件轻松地实现环境变量配置。
vue-dotenv 简介
vue-dotenv 是一个基于 dotenv 的 Vue.js 插件，它可以帮助我们在 Vue.js 项目中使用环境变量。dotenv 是一个 Node.js 模块，可以从 .env 文件中读取环境变量并将其注入到 process.env 中。
安装 vue-dotenv
首先，我们需要在项目中安装 vue-dotenv：
npm install vue-dotenv --save-dev
然后，在 main.js 中引入 vue-dotenv 并配置：
// javascriptcn.com 代码示例
import Vue from 'vue'
import App from './App.vue'
import env from 'vue-dotenv'
Vue.config.productionTip = false
Vue.use(env, {
// 配置项
})
new Vue({
render: h => h(App),
}).$mount('#app')配置环境变量
vue-dotenv 支持从 .env 文件中读取环境变量。我们可以在项目根目录下创建一个 .env 文件，并在其中定义环境变量：
VUE_APP_API_URL=http://localhost:3000/api
注意，环境变量必须以 VUE_APP_ 开头，这是 Vue CLI 默认的环境变量前缀。
在代码中使用环境变量
在 Vue.js 组件中，我们可以使用 $env 对象来访问环境变量：
export default {
created() {
console.log(process.env.VUE_APP_API_URL) // undefined
console.log(this.$env.VUE_APP_API_URL) // http://localhost:3000/api
}
}需要注意的是，我们无法直接通过 process.env 访问环境变量，必须使用 $env 对象。
配置项
vue-dotenv 支持以下配置项：
path
指定 .env 文件的路径，默认为项目根目录下的 .env 文件。
Vue.use(env, {
path: './config/.env'
})encoding
指定 .env 文件的编码，默认为 utf-8。
Vue.use(env, {
encoding: 'gbk'
})safe
指定是否加载 .env.example 文件，默认为 false。如果设置为 true，则在 .env 文件不存在时会尝试加载 .env.example 文件。
Vue.use(env, {
safe: true
})systemvars
指定是否将系统环境变量注入到 process.env 中，默认为 false。如果设置为 true，则会将系统环境变量和 .env 文件中的环境变量合并到 process.env 中。
Vue.use(env, {
systemvars: true
})示例代码
以下是一个简单的示例，演示了如何使用 vue-dotenv 实现环境变量配置：
.env 文件
VUE_APP_API_URL=http://localhost:3000/api
App.vue
// javascriptcn.com 代码示例
<template>
<div>
<p>API 地址：{{ apiUrl }}</p>
</div>
</template>
<script>
export default {
data() {
return {
apiUrl: ''
}
},
created() {
this.apiUrl = this.$env.VUE_APP_API_URL
}
}
</script>main.js
// javascriptcn.com 代码示例
import Vue from 'vue'
import App from './App.vue'
import env from 'vue-dotenv'
Vue.config.productionTip = false
Vue.use(env)
new Vue({
render: h => h(App),
}).$mount('#app')总结
使用 vue-dotenv 可以轻松地实现 Vue.js 项目的环境变量配置，使我们能够更加方便地管理不同环境下的变量。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c4491d2f5e1655d4a894b