前端 vue 如何区分开发环境

在Vue项目中,通常通过环境变量来区分不同的开发环境。这可以通过.env文件来实现,Vue CLI 3+版本支持这种方式。

  1. 在项目根目录下创建.env文件,用于设置所有的环境变量。

  2. 创建.env.local文件,用于设置本地特有的环境变量。

  3. 创建.env.development文件,用于设置开发环境的环境变量。

  4. 创建.env.production文件,用于设置生产环境的环境变量。

.env文件是默认的环境变量文件,不论何种环境,这里设置的变量都会被加载。.env.local.env.development.env.production会根据不同的环境加载相应的文件。

例如,在.env.development中设置:

复制代码
NODE_ENV=development
VUE_APP_API_URL=https://dev.example.com

.env.production中设置:

复制代码
NODE_ENV=production
VUE_APP_API_URL=https://prod.example.com

在代码中,你可以通过process.env来访问这些变量:

复制代码
console.log(process.env.NODE_ENV); // 输出当前环境
console.log(process.env.VUE_APP_API_URL); // 输出API URL
相关推荐
lbh3 小时前
当我开始像写代码一样和AI对话,一切都变了
前端·openai·ai编程
We་ct4 小时前
LeetCode 918. 环形子数组的最大和:两种解法详解
前端·数据结构·算法·leetcode·typescript·动态规划·取反
qq_406176144 小时前
深入浅出 Pinia:Vue3 时代的状态管理新选择
javascript·vue.js·ecmascript
wefly20175 小时前
m3u8live.cn 在线M3U8播放器,免安装高效验流排错
前端·后端·python·音视频·前端开发工具
C澒5 小时前
微前端容器标准化 —— 公共能力篇:通用打印
前端·架构
德育处主任Pro5 小时前
前端元素转图片,dom-to-image-more入门教程
前端·javascript·vue.js
木斯佳5 小时前
前端八股文面经大全:小红书前端一二面OC(下)·(2026-03-17)·面经深度解析
前端·vue3·proxy·八股·响应式
陈天伟教授6 小时前
人工智能应用- 预测新冠病毒传染性:04. 中国:强力措施遏制疫情
前端·人工智能·安全·xss·csrf
叫我一声阿雷吧6 小时前
JS 入门通关手册(23):JS 异步编程:回调函数与异步本质
javascript·es6·前端面试·回调函数·回调地狱·js异步编程·异步本质
zayzy6 小时前
前端八股总结
开发语言·前端·javascript