JavaScript 中怎么判断前端各种运行环境

fangxinyzj.com 2025-05-28 17:42:45

在 JavaScript 中，可以通过多种方式来判断前端应用的运行环境，比如浏览器环境、Node.js 环境、React Native 环境等。以下是一些常见的方法：

目录

1. 判断是否在浏览器环境中

2. 判断是否在 Node.js 环境中

3. 判断是否在 React Native 环境中

4. 判断是否在 Electron 环境中

5. 判断是否在微信小程序环境中

6. 判断是否在 Vue.js 环境中

7. 判断是否在 Angular 环境中

8. 判断是否在 React 环境中

9. 开发环境与生产环境检测?

?10. 判断是否是移动端

11. 判断是否是 iPad

12. 判断是否是 iPhone?

13. 判断是否是微信?

14. 判断是否是 QQ

?15. 判断是否是 iOS 设备

16. 判断是否是 Android 设备?

1. 判断是否在浏览器环境中

使用?typeof window?

//window对象在浏览器中作为全局对象存在的特点，在Node.js环境中不存在的。
if (typeof window !== 'undefined') {
  console.log('Running in a browser environment');
} else {
  console.log('Not running in a browser environment');
}

使用?navigator.userAgent

if (typeof navigator !== 'undefined' && navigator.userAgent) {
  console.log('Running in a browser environment');
} else {
  console.log('Not running in a browser environment');
}

2. 判断是否在 Node.js 环境中

使用?typeof module?和?typeof require? ?

//Node.js环境有一个全局对象global，这在浏览器中是不存在的
if (typeof module !== 'undefined' && module.exports && typeof require === 'function') {
  console.log('Running in a Node.js environment');
} else {
  console.log('Not running in a Node.js environment');
}

3. 判断是否在 React Native 环境中

使用?typeof global

if (typeof global !== 'undefined' && global.__fbBatchedBridge) {
  console.log('Running in a React Native environment');
} else {
  console.log('Not running in a React Native environment');
}

4. 判断是否在 Electron 环境中

使用?process.versions.electron

if (typeof process !== 'undefined' && process.versions && process.versions.electron) {
  console.log('Running in an Electron environment');
} else {
  console.log('Not running in an Electron environment');
}

5. 判断是否在微信小程序环境中

使用?typeof wx

if (typeof wx !== 'undefined' && wx.getSystemInfo) {
  console.log('Running in a WeChat Mini Program environment');
} else {
  console.log('Not running in a WeChat Mini Program environment');
}

6. 判断是否在 Vue.js 环境中

使用?Vue?对象

if (typeof Vue !== 'undefined') {
  console.log('Running in a Vue.js environment');
} else {
  console.log('Not running in a Vue.js environment');
}

7. 判断是否在 Angular 环境中

使用?ng?对象

if (typeof ng !== 'undefined') {
  console.log('Running in an Angular environment');
} else {
  console.log('Not running in an Angular environment');
}

8. 判断是否在 React 环境中

使用?React?对象

if (typeof React !== 'undefined') {
  console.log('Running in a React environment');
} else {
  console.log('Not running in a React environment');
}

9. 开发环境与生产环境检测?

                      //环境变量的命名实际情况而定
let isDev = process.env.VUE_APP_MODE == 'dev';
if (isDev) {
    // 开发环境相关的代码
} else {
    // 生产环境相关的代码
}

?10. 判断是否是移动端

function isMobile() {
  return /Mobi|Android/i.test(navigator.userAgent);
}

if (isMobile()) {
  console.log('Running on a mobile device');
} else {
  console.log('Not running on a mobile device');
}

11. 判断是否是 iPad

function isiPad() {
  return /iPad/i.test(navigator.userAgent);
}

if (isiPad()) {
  console.log('Running on an iPad');
} else {
  console.log('Not running on an iPad');
}

12. 判断是否是 iPhone?

function isiPhone() {
  return /iPhone/i.test(navigator.userAgent) && !isiPad();
}

if (isiPhone()) {
  console.log('Running on an iPhone');
} else {
  console.log('Not running on an iPhone');
}

13. 判断是否是微信?

function isInWeChat() {
  return /MicroMessenger/i.test(navigator.userAgent);
}

if (isInWeChat()) {
  console.log('Running in WeChat');
} else {
  console.log('Not running in WeChat');
}

14. 判断是否是 QQ

function isInQQ() {
  return /QQ/i.test(navigator.userAgent);
}

if (isInQQ()) {
  console.log('Running in QQ');
} else {
  console.log('Not running in QQ');
}

?15. 判断是否是 iOS 设备

function isiOS() {
  return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}

if (isiOS()) {
  console.log('Running on an iOS device');
} else {
  console.log('Not running on an iOS device');
}

16. 判断是否是 Android 设备?

function isAndroid() {
  return /Android/i.test(navigator.userAgent);
}

if (isAndroid()) {
  console.log('Running on an Android device');
} else {
  console.log('Not running on an Android device');
}

通过这些方法，你可以根据不同的环境变量和全局对象来判断前端应用的运行环境。如有不足或错误请指出