【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境

简介: 【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境

前面使用 TypeScript 对网络请求进行了封装,现在还有一件非常重要的事,就是区分开发环境和生产环境。


为什么要区分开发环境和生产环境呢?


因为有一些环境变量和标识符在这两个环境下可能会是不相同的,比如 baseURL 服务器地址,线上环境和开发环境一般是用的不是同一台服务器,那为什么不用同一台服务器呢?因为在开发阶段,前后端开发是会对服务器进行各种操作的,是及其不稳定的,因此这个在开发过程中使用的服务是测试服务器,当开发到一个稳定的版本的时候,就可以部署到生产服务器,这个生产服务器是给到用户去使用的,是不可以进行十分频繁的修改的,这样是及其不稳定的。


此时会出现什么问题呢?


这就意味这在开发和生产环境下,前端开发程序员就应该要进行区分这个 baseURL


那么如何区分呢?


方法一:人为区分开发环境和生产环境

servers / config.ts

直接准备一个变量就可以,在某一个环境是将其中一个注释起来,用另外一个

// 1.人为区分开发环境和生产环境
export const BASE_URL = `XXXXXXX`
export const BASE_URL = `yyyyyyy`
export TIME_OUT = 10000

很明显,这个方式是十分依赖于开发过程中人的修改,如果出现人为失误,这是一个十分危险的操作,这有很大的隐患性。

那么,如何可以自动区分开发环境和生产环境呢?

方法二:代码逻辑判断, 判断当前环境

Vite的环境变量

  1. Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量:
import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 应用是否运行在 server 上。
  1. Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的环境变量

如果不同环境的变量比较多的话,最好可以到这里进行变量的配置:

  1. 只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

知道上面的知识之后,就可以写如下的判断方式:

// 2.代码逻辑判断, 判断当前环境
// vite默认提供的环境变量
// console.log(import.meta.env.MODE)  => development 、production
console.log(import.meta.env.DEV) // 是否开发环境
console.log(import.meta.env.PROD) // 是否生产环境
console.log(import.meta.env.SSR) // 是否是服务器端渲染(server side render)

let BASE_URL = ''
if (import.meta.env.PROD) {
  BASE_URL = 'http://codercba.prod:8000'
} else {
  BASE_URL = 'http://coderwhy.dev:8000'
}

console.log(BASE_URL)

// 3.通过创建.env文件直接创建变量
console.log(import.meta.env.VITE_URL)

export const TIME_OUT = 10000
export { BASE_URL }
目录
相关文章
|
1月前
|
自然语言处理 JavaScript 前端开发
一夜获千星!已获 1.7k+,Art Design Pro:Vue3 + Vite + TypeScript 打造的高颜值管理系统模板,这个让后端小哥直呼救命的后台系统
Art Design Pro 是一款基于 Vue 3、Vite 和 TypeScript 的高颜值后台管理系统模板,已获 1.7k+ 星标。项目专注于用户体验与视觉设计,支持主题切换、多语言、权限管理及图表展示等功能,内置常用业务组件,便于快速搭建现代化管理界面。其技术栈先进,开发体验流畅,适配多设备,满足企业级应用需求。项目地址:[GitHub](https://github.com/Daymychen/art-design-pro)。
236 11
|
3月前
|
Java 数据库
jsp CRM客户管理系统(含数据库脚本以及文档)
jsp CRM客户管理系统(含数据库脚本以及文档)
81 10
|
5月前
|
JavaScript 安全 前端开发
Gzm Design:开源神器!用 Vue3、Vite4、TypeScript 革新海报设计,免费开源的海报设计器,主流技术打造,轻松高效
海报设计在各个领域都有着广泛的应用,无论是商业广告、活动宣传还是个人创意表达。今天要给大家介绍一款免费开源的海报设计器——Gzm Design,它基于最新的主流技术开发,为用户提供了丰富的功能,让海报设计变得轻松又高效。
285 64
|
5月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
335 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
6月前
|
存储 人工智能 开发框架
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
Eliza 是一个开源的多代理模拟框架,支持多平台连接、多模型集成,能够快速构建智能、高效的AI系统。
509 8
Eliza:TypeScript 版开源 AI Agent 开发框架,快速搭建智能、个性的 Agents 系统
|
7月前
|
安全 数据挖掘 数据安全/隐私保护
国产CRM品牌巡礼:系统品牌的核心优势与特色
本文深度解析国产CRM系统的四大知名品牌:销售易、神州云动、销帮帮和天衣云。 销售易:中国领先的CRM解决方案提供商,提供全渠道获客、智能化销售流程及AIGC技术应用,赢得500强企业信赖。 神州云动:以PaaS+SaaS模式、灵活定制和行业解决方案著称,支持企业实现客户关系管理的数字化和智能化。 销帮帮:面向中小企业的实用型CRM系统,提供销售跟踪、客户视图等功能,提高销售效率和客户满意度。 天衣云:专注于云端部署,提供快速部署、高安全性的CRM解决方案,确保企业信息安全。 各品牌各有特色,企业应根据自身需求选择合适的CRM系统,以实现客户关系的全面管理,提升业务效率和客户满意度。
|
8月前
|
搜索推荐 数据库 UED
CRM系统源码|客户管理系统源码开发
CRM系统通过提供个性化的用户体验、提高生产力、改善客户体验和增加销售额来助力企业成长。集成CRM能自动化数据输入,减少管理时间,提高销售代表的效率。此外,CRM还能增强客户互动,降低跳出率,增加透明度,确保整个公司的协调合作。
254 5
|
15天前
|
缓存 监控 安全
通义大模型与现有企业系统集成实战《CRM案例分析与安全最佳实践》
本文档详细介绍了基于通义大模型的CRM系统集成架构设计与优化实践。涵盖混合部署架构演进(新增向量缓存、双通道同步)、性能基准测试对比、客户意图分析模块、商机预测系统等核心功能实现。同时,深入探讨了安全防护体系、三级缓存架构、请求批处理优化及故障处理机制,并展示了实时客户画像生成和动态提示词工程。通过实施,显著提升客服响应速度(425%)、商机识别准确率(37%)及客户满意度(15%)。最后,规划了技术演进路线图,从单点集成迈向自主优化阶段,推动业务效率与价值持续增长。
|
2月前
|
机器学习/深度学习 人工智能 BI
500人规模的企业CRM必备的5大关键能力
文章介绍了适配大中型企业CRM系统的五大关键功能:精细化销售管理、全渠道营销、PaaS定制化、AI应用及生态连接能力。以纷享销客为例,详细解析了其在销售线索管理、行为与流程精细化管理、全渠道获客、灵活定制开发、AI赋能及生态协同等方面的优势。文章指出,在数字经济浪潮下,CRM已成为企业数字化转型的核心工具,通过重构客户运营体系,助力企业提升效率、优化决策并实现可持续增长。
|
4月前
|
安全 搜索推荐
销售易CRM:实施与服务全程护航,确保企业价值落地
销售易CRM深知实施与服务对企业部署客户关系管理系统的重要性。通过专业实施团队提供定制化部署方案,确保系统与企业业务无缝对接;全程培训帮助企业培养内部专家,推动CRM应用水平提升;7×24小时技术支持及时解决用户问题,保障系统稳定运行;持续迭代优化适应企业成长需求。销售易CRM以全方位服务助力企业数字化转型。