如何根据Cordova或Electron构建环境切换Vue应用的显示组件？

嘿，这个场景我熟！要实现根据构建环境自动切换/startpage路由对应的组件，核心思路是先检测当前运行环境，再动态指定路由的component属性。下面给你两种实用方案：

方案1：静态导入组件（简单直接） #

这种方式适合组件体积不大的情况，代码直观易懂：

import { RouterOptions } from 'vue-router';
// 导入三个组件（别忘了替换成你实际的组件路径）
import StartPage from '@/components/StartPage.vue';
import CordovaStartPage from '@/components/CordovaStartPage.vue';
import ElectronStartPage from '@/components/ElectronStartPage.vue';

// 检测当前运行环境
const isCordova = typeof window !== 'undefined' && !!window.cordova;
const isElectron = typeof window !== 'undefined' && 
                   typeof window.process !== 'undefined' && 
                   window.process.type === 'renderer';

export const routerOptions: RouterOptions = {
  routes: [
    {
      path: "/startpage",
      // 根据环境选择对应组件，留StartPage作为兜底
      component: isCordova ? CordovaStartPage : (isElectron ? ElectronStartPage : StartPage)
    }
  ]
};

环境检测说明： #

• Cordova环境：Cordova初始化后会在全局window对象上挂载cordova属性，所以通过!!window.cordova判断
• Electron环境：Electron的渲染进程中，window会包含process对象，且process.type为renderer，用这个来区分Electron和普通网页环境

方案2：动态导入组件（代码分割优化） #

如果你的组件体积较大，推荐用动态导入实现代码分割，这样打包时会把不同环境的组件拆分成单独的chunk，减少初始加载体积：

import { RouterOptions } from 'vue-router';

// 检测当前运行环境
const isCordova = typeof window !== 'undefined' && !!window.cordova;
const isElectron = typeof window !== 'undefined' && 
                   typeof window.process !== 'undefined' && 
                   window.process.type === 'renderer';

export const routerOptions: RouterOptions = {
  routes: [
    {
      path: "/startpage",
      // 动态导入对应组件
      component: () => {
        if (isCordova) {
          return import('@/components/CordovaStartPage.vue');
        } else if (isElectron) {
          return import('@/components/ElectronStartPage.vue');
        }
        // 默认加载原始的StartPage
        return import('@/components/StartPage.vue');
      }
    }
  ]
};

额外提示： #

如果需要在更多地方复用环境判断逻辑，可以把检测代码抽成单独的工具函数，比如新建src/utils/env.ts：

export const getEnv = () => {
  if (typeof window === 'undefined') return 'web';
  if (!!window.cordova) return 'cordova';
  if (typeof window.process !== 'undefined' && window.process.type === 'renderer') return 'electron';
  return 'web';
};

然后在路由文件里导入使用：

import { getEnv } from '@/utils/env';

// ...
component: getEnv() === 'cordova' ? CordovaStartPage : (getEnv() === 'electron' ? ElectronStartPage : StartPage)

这样代码更整洁，也方便后续维护~

内容的提问来源于stack exchange，提问作者Christian