vue项目配置环境变量

置顶

helloworld963

已于 2022-05-24 15:59:48 修改

阅读量4.8k

点赞数 2

分类专栏：工具文章标签： vue.js javascript node.js

于 2020-06-23 14:47:56 首次发布

本文链接：https://blog.csdn.net/helloworld963/article/details/106922646

版权

这篇博客介绍了如何在Vue项目中利用dotenv解决多环境配置问题。通过安装dotenv，在项目根目录创建.env文件，根据不同的环境（如开发、测试、预发布、生产）创建相应的.env文件，并设置相关配置。在package.json中定义打包命令，结合vue-cli-service build --mode选项，实现一键打包不同环境的项目。同时，调整vue.config.js的outputDir，确保打包文件位于目标文件夹。这种方法能避免手动修改配置的繁琐和错误，提高工作效率。

摘要由CSDN通过智能技术生成

更新一下--------------------------------------------------------------------------------

最近了解到dotenv，可以解决在开发环境的多环境配置问题。
在项目中安装 dotenv

npm run dotenv

根目录下创建 .env 文件
HOST=localhost PORT=3000
根目录下 index.js 下引入 dotenv 并使用
require('dotenv').config({ path: '.env' })

// 使用 console.log(process.env.HOST) // localhost console.log(process.env.PORT) // 3000

需求： 前后端分离的项目中，前端会有很多环境：本地开发，测试环境，预发布环境，正式上线环境等等，我们的项目有3套基本相同的项目，意思是有12个以上环境，当每个环境都需要打包的时候，手动修改配置就很繁琐而且难免出错，比如每个环境对应的服务器地址不同，项目名称不同。
解决： 在根目录下创建.env.xxx文件，例如.env.development,.env.production,.env.staging,.env.51(51是我的服务器标识)等等
这些都是配置环境变量
里面配置你需要切换的服务器连接地址