构建跨平台桌面应用的Electron-Vue项目指南

最新推荐文章于 2025-08-08 14:36:29 发布

周不宅

最新推荐文章于 2025-08-08 14:36:29 发布

阅读量637

点赞数 10

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_35972981/article/details/149761416

本文还有配套的精品资源，点击获取

简介：Electron-Vue是一个融合Electron和Vue.js的框架，让开发者能够利用Vue生态系统构建桌面应用。项目包含了package.json、dist_electron、package-lock.json等关键文件，遵循Vue CLI标准布局，并使用ESLint进行代码质量控制。本文将解析项目结构，并详细阐述开发流程，从初始化到发布，为开发者提供完整的桌面应用开发体验。
electron-vue项目示例

1. Electron-Vue概述

在现代桌面应用开发领域，Electron-Vue提供了一个结合Vue.js和Electron的强大框架。开发者可以借助Vue.js丰富的组件生态快速搭建用户界面，同时利用Electron的强大后端能力，实现跨平台桌面应用的构建。

1.1 Electron-Vue简介

Electron-Vue是一个基于Vue.js和Electron的框架，它让开发者能够使用Vue单文件组件（Single File Components, SFCs）来构建桌面应用的用户界面部分，而Electron提供了底层的渲染和运行机制。通过结合这两者的优点，开发者可以在一个项目中同时享受前端和桌面应用的开发优势。

1.2 Electron-Vue的特性与优势

Electron-Vue提供了诸多便利的特性来简化桌面应用的开发流程。它包括了热重载功能，支持开发者实时预览对界面的更改而无需重新启动应用。它还支持将应用打包成可执行文件，方便在Windows、MacOS和Linux平台上部署。这样的集成模式使得整个开发过程更为高效和友好，特别适合于那些已经熟悉Vue.js的开发者。

1.3 Electron-Vue应用场景分析

当需要创建具有丰富Web技术体验的桌面应用，或者想要快速将现有的Web应用转换为桌面应用时，Electron-Vue是一个非常好的选择。它特别适用于创建复杂的用户界面、多窗口应用和需要高度自定义和扩展的桌面应用。通过分析具体的应用场景，比如内容编辑器、个人财务管理工具或者媒体播放器，开发者可以发现Electron-Vue带来的强大和灵活性。

2.1 package.json配置文件

2.1.1 依赖管理与项目版本控制

在 package.json 文件中，依赖管理是通过 dependencies 和 devDependencies 字段来实现的。 dependencies 字段用于管理生产环境所需的依赖，而 devDependencies 字段用于开发环境。这是为了确保生产环境不包含任何不必要的开发工具和库。

对于版本控制，我们通常在每个依赖项后面指定一个版本范围。这可以通过语义版本控制来完成，比如 ^1.2.3 表示接受主版本号为1的任何更新，但不接受主版本号变更的版本。

示例：

{
  "dependencies": {
    "vue": "^2.6.10",
    "electron": "^6.0.10"
  },
  "devDependencies": {
    "vue-cli": "^3.11.0",
    "@vue/test-utils": "^1.0.0"
  }
}

2.1.2 脚本执行与开发工具集成

scripts 字段用于列出在项目中可以使用的命令行指令，它们是与开发相关的任务的快捷方式。这些脚本经常用于运行开发服务器、执行测试、构建生产版本等。

例如，Electron-Vue项目可能具有以下脚本：

{
  "scripts": {
    "serve": "vue-cli-service electron:serve",
    "build": "vue-cli-service electron:build"
  }
}

执行 npm run serve 将会启动一个开发服务器，而 npm run build 会构建应用以便进行打包。

2.2 dist_electron目录

2.2.1 构建产物的存放与管理

dist_electron 目录通常用于存放Electron应用的构建产物，它是在项目构建过程中由Vue CLI插件自动生成的。构建产物会包含运行Electron应用所需的文件，如可执行文件、预编译的Node.js模块、静态资源等。

例如，构建一个Windows平台的应用， dist_electron 目录可能包含如下文件：

dist_electron/
├── appSalary.exe
├── appSalary-1.0.0-linux-x64.zip
├── appSalary-1.0.0-macos-x64.zip
├── appSalary-1.0.0-win32-ia32.zip
├── appSalary-1.0.0-win32-x64.zip
└── resources/

2.2.2 Electron应用的打包与分发

打包是将源代码转换为可执行应用的过程。对于Electron-Vue应用，打包意味着创建独立的二进制文件，这些文件可以在目标操作系统的机器上独立运行，而无需安装Node.js或任何其他依赖。

通常，打包可以通过Vue CLI提供的脚本命令完成。例如， npm run electron:build 将调用Webpack以及Electron打包工具，如 electron-builder 或 electron-packager ，生成对应平台的安装包。

分发时，打包好的应用可以通过各种渠道，如官方网站、应用商店或直接分发安装包，让用户下载安装。

2.3 package-lock.json锁定文件

2.3.1 锁定依赖项的必要性

当安装依赖项时，为了确保依赖项的一致性，使用 package-lock.json 文件是一个好习惯。它锁定了每一个依赖项的确切版本，这样可以防止依赖项的未来更新导致版本不兼容的问题。

2.3.2 锁定文件的作用与维护

package-lock.json 文件需要被提交到版本控制系统中，以确保所有开发人员使用相同的依赖版本。在执行 npm install 时， package-lock.json 会确保生成的 node_modules 目录与预期一致。

维护 package-lock.json 很简单，通常只需要在更新依赖项时重新生成这个文件。可以通过 npm install --package-lock 来强制生成新的 package-lock.json 文件。

2.4 src源码目录

2.4.1 源码结构与模块划分

src 目录是存放Vue源码的地方，对于Electron-Vue项目，它还需要包含Electron集成相关的代码。典型的目录结构可能如下：

src/
├── assets/                # 静态资源
├── components/             # Vue组件
├── electron/               # Electron相关代码
│   ├── main/               # 主进程代码
│   └── renderer/           # 渲染进程代码
├── router/                 # Vue路由配置
├── store/                  # Vuex状态管理
├── App.vue                 # 主Vue组件
├── main.js                 # 应用入口文件
└── electron.js             # Electron入口文件

2.4.2 Vue组件与Electron集成方式

Vue组件与Electron集成主要发生在 electron.js 文件中，该文件通常是Electron应用的入口点。这里会使用 app 和 BrowserWindow 模块来启动应用，并将Vue渲染进程嵌入到Electron的窗口中。

示例代码：

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadURL(path.join('file://', __dirname, '/index.html'));
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

这里， index.html 是Vue应用的入口点。 webPreferences 选项允许Electron窗口加载Node.js模块，这对于Electron-Vue应用来说很重要，因为这样可以直接访问Node.js的API。

3. 开发环境配置与初始化

3.1 项目初始化与依赖安装

3.1.1 创建项目骨架

在开发Electron-Vue应用之前，第一步是设置项目的初始结构。这涉及到创建文件夹、初始化git仓库、安装必要的依赖以及配置基本的脚本。可以利用Vue CLI或者Yeoman等脚手架工具快速完成项目初始化工作。以下是创建项目骨架的基本步骤：

安装Node.js和npm ：确保你的开发环境中安装了最新版本的Node.js和npm。这是利用npm安装项目依赖的基础。
初始化git仓库 ：在项目文件夹内初始化git仓库，这将帮助你跟踪文件更改和协作开发。
使用Vue CLI初始化项目 ：安装Vue CLI全局命令行工具后，可以使用 vue create [project-name] 命令创建新项目。
添加Electron支持 ：安装Electron相关依赖到你的项目中，如 electron 、 electron-builder 等。
配置项目文件 ：修改 package.json 和其他配置文件，以满足Electron-Vue项目的特定需求。

3.1.2 依赖项的安装与配置

依赖项的管理是任何项目成功的关键。在Electron-Vue项目中，尤其需要关注前后端依赖的管理和配置。在本小节中，我们将详细介绍如何安装和配置项目依赖。

安装核心依赖 ：核心依赖包括Vue、Vue Router、Vuex等前端库和框架，以及Electron及其配套工具。

bash npm install vue vue-router vuex electron electron-builder --save-dev

配置Vue组件 ：在 src 目录下创建Vue组件，确保它们可以被Electron渲染进程正确加载。
配置Electron主进程 ：在 src 目录下创建主进程文件，如 main.js ，并在其中初始化Electron和Vue应用。
配置构建脚本 ：配置 package.json 中的脚本，以支持开发、构建和打包操作。

json "scripts": { "dev": "electron-forge dev", "build": "electron-forge build", "start": "electron-forge start" }

配置Electron Forge ：为了简化构建和打包过程，建议使用Electron Forge。安装并配置相关插件，以便对应用进行打包和分发。
验证配置 ：在安装和配置完成后，运行 npm run dev 来验证开发环境是否正确设置。

3.2 开发环境启动与热重载

3.2.1 开发服务器的配置

在开发Electron-Vue应用时，开发服务器的配置至关重要，因为它将负责应用的热重载和其他开发相关功能。在本小节，我们将探讨如何配置开发服务器，以提供最佳的开发体验。

配置Webpack ：Webpack是目前最流行的前端模块打包工具。在Electron-Vue项目中，通过配置Webpack来实现模块的热重载。
配置vue-loader ：Vue组件需要通过vue-loader进行处理。配置vue-loader以确保Vue文件可以被正确加载和编译。
配置Electron的webpack插件 ：通过安装如 webpack-electron-plugin 这样的插件，可以确保Electron应用可以加载webpack构建的资源。
配置Babel ：为了支持现代JavaScript特性，需要安装并配置Babel，使其在Webpack构建过程中转译代码。
集成开发工具 ：集成如Vue DevTools等开发工具，进一步增强开发体验。

3.2.2 热重载机制与优势

热重载是一种在开发过程中无需完全刷新应用即可更新更改的功能。它极大地提高了开发效率和体验，下面详细讨论热重载的机制和优势。

实现原理 ：热重载通常基于webpack的模块热替换（HMR）功能。当开发者对源代码做出更改时，HMR会自动推送更新到应用，仅替换变更的模块。
优势：热重载减少了等待时间，开发者可以实时看到代码更改的效果，提高调试效率。
配置示例 ：配置Webpack和vue-loader以启用HMR功能。

javascript // webpack.config.js 示例配置 module.exports = { // ... devServer: { hot: true, // ... }, // ... plugins: [ // ... new webpack.HotModuleReplacementPlugin(), // ... ], };

3.3 源码编写与业务逻辑开发

3.3.1 源码编写规范与流程

编写高质量的源码是任何软件项目的基石。本小节将探讨在Electron-Vue项目中实施源码编写规范和流程的最佳实践。

代码风格 ：遵循流行的代码风格指南，如Airbnb或Google JavaScript Style Guide。
使用ESLint进行代码检查 ：ESLint是一个用于JavaScript的静态代码分析工具，可以识别并报告代码中不符合规定模式的问题。
使用Prettier进行代码格式化 ：Prettier是一个自动代码格式化工具，可以帮助开发者统一代码风格，减少风格冲突。
版本控制 ：使用git进行版本控制，并遵循合适的分支和合并策略。
单元测试 ：编写单元测试来确保源码的质量。

3.3.2 业务逻辑的实现与测试

完成源码编写后，接下来是实现业务逻辑并编写相应的单元测试。

实现业务逻辑 ：根据项目需求，实现具体的功能，例如窗口管理、数据存储、网络请求等。
编写单元测试 ：使用Mocha、Jest或Cypress等工具编写单元测试。
测试驱动开发（TDD） ：可选择测试驱动开发方法，先编写测试用例，再实现功能。
集成测试 ：在功能实现后，编写集成测试来确保整个应用的各个部分可以协同工作。
持续集成 ：将测试集成到CI/CD流程中，如使用Jenkins、Travis CI等工具实现自动化测试。

通过以上的章节内容，你现在已经了解了如何在Electron-Vue项目中设置开发环境、安装配置依赖项、以及进行源码的编写和业务逻辑的实现。这些技能将帮助你高效地构建和维护一个稳定且功能丰富的桌面应用。

4. 项目开发实践

4.1 单元测试与端到端测试

4.1.1 单元测试的策略与工具选择

在进行单元测试时，策略的选择至关重要，因为这将直接影响测试的有效性和覆盖率。单元测试通常需要针对应用中各个独立模块进行，以确保每个单独的代码单元按照预期工作。测试框架如Jest、Mocha或AVA等是常用的选择，它们提供了丰富的测试工具和断言库，以及能够运行在Node.js环境中的测试。

选择合适的工具要基于以下因素：
- 测试运行速度 ：单元测试应当快速执行，以便于开发者频繁运行并获得即时反馈。
- 测试隔离性 ：测试框架应当能够提供可靠的隔离机制，避免测试间互相干扰。
- 测试代码与产品代码分离 ：理想情况下，测试代码不应影响产品代码的清晰度。
- 社区与文档 ：一个有着良好社区支持和详尽文档的测试工具可以提供大量的资源和帮助，特别是在遇到难题时。

以Jest为例，它是一个由Facebook开发的JavaScript测试框架，拥有零配置的特性，并且能够快速启动测试进程，支持代码覆盖率报告，并且内置了模拟功能，非常适合Vue.js项目。

4.1.2 端到端测试的重要性与实施

端到端测试通常是指从用户的角度模拟使用产品的过程，检查不同模块协同工作时的交互是否符合预期。这涉及到测试整个用户工作流，包括前端、后端甚至第三方服务。在Electron-Vue应用中，常用的端到端测试工具有Cypress、Selenium和Puppeteer等。

端到端测试对于确保应用程序的稳定性和可用性至关重要。它通过模拟用户行为来验证应用程序的行为是否正确，而不是仅仅测试单个函数或组件。这有助于发现产品开发过程中可能未注意到的问题。

实施端到端测试的关键步骤包括：
1. 选择合适的工具 ：根据应用的需求和开发团队的熟悉程度来选择一个合适的端到端测试工具。
2. 设置测试环境 ：搭建一个与生产环境相似的测试环境，确保测试结果的准确性。
3. 编写测试脚本 ：编写测试脚本模拟用户的操作过程，包括用户界面的交互、网络请求、数据验证等。
4. 运行测试并分析结果 ：执行测试并收集结果，对失败的测试进行分析和修复。

使用Puppeteer进行端到端测试的代码示例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:8080');

  // 通过Puppeteer API模拟用户交互
  await page.click('#start-button');
  await page.waitForSelector('.result-message');

  // 验证操作结果
  const message = await page.$eval('.result-message', el => el.textContent);
  console.log(message); // Output: "Hello Electron-Vue!"

  await browser.close();
})();

以上示例展示了如何使用Puppeteer打开一个Electron-Vue应用，点击一个按钮，并验证结果文本消息。

4.2 构建与打包应用

4.2.1 构建配置的优化

构建配置是项目构建过程中的重要环节，一个优化良好的构建配置可以显著提高应用性能，并降低最终的打包体积。在Electron-Vue项目中，构建配置通常由Webpack完成。Webpack允许通过各种插件和加载器来优化输出。

为了优化构建配置，可以考虑以下几点：
- 代码拆分 ：通过 import() 实现动态引入，减少初始加载体积。
- Tree shaking ：利用ES6模块的静态性质，移除未使用的代码。
- 资源优化 ：对图片、字体等资源进行压缩和优化。
- 使用CDN ：将第三方库或框架通过CDN加载，减轻应用包的大小。

构建配置的优化是持续的过程，需要定期审查并根据项目实际情况进行调整。

4.2.2 打包流程与性能考量

打包流程是指将源代码和资源打包成可部署的格式。对于Electron应用，常见的格式是asar文件和多平台的安装程序。打包流程包括清理旧产物、编译资源、打包应用和最终的资源优化。

打包过程中的性能考量涉及：
- 资源压缩 ：对最终的静态资源进行压缩，例如GZip。
- 缓存利用 ：使用缓存来避免重复的构建步骤。
- 并行处理 ：尽可能利用多核CPU进行并行构建。

在Node.js中， npm run build 命令会启动Webpack的生产环境构建，这个过程可以进一步通过 webpack --config production.config.js 等参数来自定义配置。

4.3 应用发布与部署

4.3.1 应用发布前的准备

在应用发布之前，需要完成一系列的准备工作。包括但不限于：
- 功能完整性检查 ：确保所有功能按预期工作。
- 性能测试 ：进行加载时间和资源使用等性能测试。
- 安全性审核 ：检查潜在的安全漏洞，并采取预防措施。
- 文档更新 ：更新维护文档和用户手册。
- 反馈循环 ：设置用户反馈收集机制，以便于持续改进。

4.3.2 部署策略与平台选择

部署策略直接影响用户如何接收和安装应用。常见的部署策略包括：
- 持续部署 ：每次代码提交后自动触发构建和部署流程。
- 按需部署 ：在特定条件下手动触发部署流程。

平台选择同样重要，取决于目标用户和需求：
- 应用商店 ：如Mac App Store或Windows Store提供广泛的用户覆盖。
- 独立部署 ：通过网站提供下载或在本地安装。
- 云平台部署 ：如AWS或Azure，可以提供灵活的云服务。

选择正确的部署平台需要考虑：
- 目标用户 ：用户的操作系统和偏好。
- 维护成本 ：平台的维护和更新成本。
- 可控性 ：对于应用的控制程度和定制能力。
- 可扩展性 ：部署平台能否应对用户增长的需要。

5. 项目优化与调试

5.1 性能优化策略

5.1.1 资源加载优化

在开发桌面应用时，资源加载速度是影响用户体验的重要因素之一。优化资源加载不仅可以减少应用的启动时间，还可以提升应用的响应速度。在Electron-Vue应用中，以下几个方面是优化资源加载的关键。

首先，对于图片、字体等静态资源，应确保它们通过懒加载的方式进行加载。这意味着只有当用户在界面上滚动到它们所在的位置时，这些资源才会从服务器加载。这可以通过在Vue组件中使用内置的 v-lazy 指令来轻松实现。

其次，对于JavaScript和CSS文件，我们可以利用Webpack或其他现代构建工具提供的代码分割功能。通过使用动态import()或者分割配置，将大的包分割成多个小块，仅在实际需要时才加载这些块。

最后，对于第三方库和框架，尽可能选择轻量级和按需加载的版本。例如，可以使用 lodash-es 代替 lodash 来使用ES模块版本，这样可以减少总体打包体积。

5.1.2 代码分割与懒加载

代码分割是现代前端优化的核心策略之一，它的目的是将应用的代码拆分成几个小块，以确保用户在需要时才加载这些代码。这不仅可以加快应用的首次加载时间，还可以减少总体的内存消耗。

在Electron-Vue项目中，我们可以使用Vue CLI提供的路由懒加载功能来实现组件的懒加载。这是通过将Vue组件文件的引入方式改用动态import语法来完成的。例如：

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-bar" */ './Bar.vue')

Vue.use(Router)
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

在上面的代码中，组件 Foo 和 Bar 将被分割到两个独立的代码块中。当用户访问这些路由时，相关的代码才会被加载。

此外，对于Electron的主进程代码，虽然不支持直接使用Vue的懒加载，但可以通过Electron的 BrowserWindow 加载的HTML文件来实现类似的效果，将需要的代码通过 <script> 标签在页面加载后动态添加。

5.2 调试技巧与工具使用

5.2.1 常用调试工具介绍

调试是任何开发过程中不可或缺的一步。在Electron-Vue项目中，我们可以利用多种工具来帮助我们更高效地调试代码。

首先是 Vue DevTools ，这是一个强大的Chrome扩展程序，它允许我们直接在浏览器中查看Vue组件的状态，并且能够调试组件渲染和事件。它对于前端开发者来说非常友好，可以与Electron应用配合使用。

对于Electron的进程问题， Electron Fiddle 是一个轻量级的工具，允许我们快速构建和测试Electron应用。它类似于在线的代码沙盒，可以用来测试小段代码和概念验证。

除此之外， Sentry 可用于监控和修复生产环境中的错误。它可以集成到Electron应用中，提供实时错误跟踪和性能监控。

5.2.2 故障排查流程与方法

故障排查是确保应用稳定性的重要步骤。在Electron-Vue项目中，进行故障排查时，我们应该遵循以下流程：

日志分析 ：首先检查应用的日志，这是识别问题的第一步。在Electron应用中，可以通过主进程和渲染进程的控制台日志来发现异常或错误。
网络请求检查 ：在很多情况下，问题可能是由于网络请求失败导致的。可以使用开发者工具中的网络面板来查看请求的详细信息。
内存与性能分析 ：使用Chrome开发者工具的性能分析面板来测试应用的运行情况。特别是对于内存泄漏的问题，这是一个非常有用的诊断工具。
单元测试与集成测试 ：当确认了一个特定的功能点出现了问题，可以编写单元测试或集成测试来定位和重现问题。
源码调试 ：对于复杂的逻辑问题，直接在源码级别进行调试是必要的。可以使用 debug 模块或 V8 调试器来逐行调试JavaScript代码。
外部库与框架检查 ：检查是否有第三方库或框架的更新可以解决已知问题。

通过上述步骤，我们可以系统地识别和解决Electron-Vue项目中的问题，进而提升应用的整体质量。

6. 安全性与兼容性考量

6.1 安全性最佳实践

6.1.1 Electron应用的安全风险

Electron应用虽然强大，但同样面临着安全风险。这些风险主要来源于以下几个方面：

代码执行权限 ：由于Electron集成了完整的Chromium和Node.js，因此它可以执行任何JavaScript代码，这可能会被恶意利用。
数据存储 ：Electron应用通常会存储敏感数据，如果这些数据被未授权访问，可能会导致信息泄露。
第三方库漏洞 ：由于Electron应用依赖大量第三方npm包，这些包可能包含安全漏洞。

6.1.2 安全漏洞的预防与修复

为了减少安全风险，开发者需要采取以下最佳实践：

沙箱化 ：尽可能限制Node.js环境的权限，使其在沙箱模式下运行，减少对系统资源的访问。
代码审计 ：定期对项目进行安全审计，确保没有引入任何已知的安全漏洞。
自动更新 ：使用autoUpdater模块实施应用的自动更新机制，快速响应并修复安全漏洞。

6.2 兼容性测试与调整

6.2.1 浏览器兼容性问题分析

Electron应用依赖Chromium，因此在不同版本的Chromium上可能存在兼容性问题。此外，应用内部的Web内容也需要进行兼容性测试，以确保在不同浏览器上运行良好。

6.2.2 兼容性调整策略与实现

为了确保应用具有良好的兼容性，可以采取以下策略：

多版本测试 ：在多个版本的Electron环境中进行应用测试，确保在不同版本下功能正常。
特性检测 ：使用特性检测而非浏览器检测，针对不同的环境动态地调整应用的行为。
Polyfill和Shim ：对于旧版浏览器，使用Polyfill或Shim来模拟缺失的功能。

// 示例代码：使用Polyfill来支持旧版浏览器的Promise
import 'core-js/es6/promise';

以上代码通过引入core-js库来提供Promise的Polyfill，确保在不支持ES6的环境中依然可以使用Promise。

6.2.3 兼容性调整的工具与库

为了帮助开发者快速进行兼容性调整，有一些工具和库可以提供支持：

Browserlist ：帮助指定目标浏览器范围，使打包工具只包含指定浏览器所需的代码。
Babel ：提供JavaScript代码的转译支持，让最新的JavaScript特性能够在旧版浏览器中运行。

// package.json中的Browserlist配置示例
{
  "browserslist": [
    "last 2 versions",
    "not ie < 11",
    "not dead",
    "> 1%",
    "maintained node versions"
  ]
}

6.3 安全性与兼容性实践案例分析

6.3.1 安全性实践案例

以Electron社区中知名的GitHub客户端“ProtonMail Bridge”为例，该应用在安全性方面做了以下努力：

使用了Electron的安全更新机制来及时发布修复补丁。
对Node.js部分的功能进行了沙箱化处理，限制了访问范围。
定期进行第三方依赖的审计，并及时升级。

6.3.2 兼容性调整实践案例

另一个案例是流行的媒体播放器“VLC for Electron”。该应用在面对不同浏览器兼容性问题时，采取了以下策略：

使用Browserlist配置 ：确保应用只包含目标浏览器所需的代码，减少打包体积。
运用Babel进行代码转译 ：使应用能够兼容更广泛的浏览器版本。

// .babelrc配置文件示例
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 11"]
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

以上配置指明了应用需要支持的浏览器版本范围，并启用了按需引入polyfill的策略。