【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 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
3月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
20天前
|
Web App开发 JavaScript 前端开发
探索Deno:新一代JavaScript/TypeScript运行时环境
【10月更文挑战第25天】Deno 是一个新兴的 JavaScript/TypeScript 运行时环境,由 Node.js 创始人 Ryan Dahl 发起。本文介绍了 Deno 的核心特性,如安全性、现代化、性能和 TypeScript 支持,以及开发技巧和实用工具。Deno 通过解决 Node.js 的设计问题,提供了更好的开发体验,未来有望进一步集成 WebAssembly,拓展其生态系统。
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与最佳实践
【10月更文挑战第8天】深入理解TypeScript:类型系统与最佳实践
|
1月前
|
JavaScript 安全 开发工具
在 Vue 3 中使用 TypeScript
【10月更文挑战第3天】
|
21天前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
24 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
3月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
3月前
|
搜索推荐
实现CRM与ERP系统无缝集成,优化客户关系管理
在当今竞争激烈的市场环境中,企业要想保持领先地位,必须高效地管理客户关系并优化内部资源。CRM(客户关系管理)系统与ERP(企业资源规划)系统的无缝集成,为企业提供了一种强大的工具,以实现这一目标
67 2
|
3月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
46 3