【混合开发】CefSharp+Vue桌面应用程序开发

为什么选择CefSharp+Vue做桌面应用程序

CefSharp 基于 Chromium Embedded Framework (CEF) ，它可以将 Chromium 浏览器的功能嵌入到 .NET 应用程序中。通过 CefSharp，开发者可以在桌面应用程序中集成 Web 技术，包括 HTML、JavaScript、CSS 等，来实现丰富的用户界面和交互体验。大厂产物，稳定性高。

Vue.js 渐进式 JavaScript 框架，专注于构建用户界面的前端框架。Vue 通过组件化的开发方式，易于集成和扩展，使开发者能够快速构建响应式、动态的 Web 应用。

把 CefSharp 与 Vue.js 结合使用，可以通过桌面应用嵌入 Web 技术实现现代的用户界面。CefSharp 相当于一个浏览器引擎，用来显示 Vue.js 渲染的页面。这样，既能享受桌面应用程序的性能，又能利用 Web 技术来构建交互性强、富有表现力的界面。类似于用自定义化浏览器实现桌面应用程序。

优势：

提升桌面应用的用户体验：借助 Vue.js 的现代化前端技术，开发者能够创建更具吸引力和互动性的桌面应用。
增强开发的灵活性与效率：CefSharp 提供强大的桌面功能，而 Vue.js 提供快速开发界面的能力，两者结合可以显著提升开发效率。
促进跨平台桌面应用的开发：通过 Vue.js 与 CefSharp，开发者可以更轻松地创建支持多平台的桌面应用，尤其是在需要集成 Web
功能时。

两种选择

使用CefSharp加载公网地址，实现内嵌web页面。
使用CefSharp加载Vue本地包，实现高定制化应用程序。

实现方式	加载公网地址	加载 Vue 本地包
数据来源	从互联网上加载（通过 URL）	从本地文件系统加载（通过文件路径）
网络依赖	需要稳定的网络连接，依赖公网服务器	无需网络连接，直接通过本地文件加载
资源更新	资源更新需要更新服务器上的 Web 页面	资源更新只需要重新构建本地 Vue 项目并替换本地文件
开发调试	可以直接在 Web 环境中调试，使用浏览器开发工具调试	需要通过本地构建工具调试 Vue 项目
性能开销	加载速度依赖于服务器和网络条件	加载速度较快，无需网络请求，完全由本地文件提供支持
适用场景	用于需要动态更新且依赖外部 Web 服务的应用	用于本地化、独立于网络的桌面应用
交互性	适合涉及到网络数据交换的场景	与本地功能的交互性较强，适合本地数据库或本地功能的集成
资源管理	资源管理集中在 Web 服务器端，前端需要通过网络获取	所有资源（如 JS、CSS、图片等）都需要嵌入到本地文件中
UI 更新	需要服务器端更新和部署	本地更新，用户需要手动更新本地应用或通过自动化更新机制来更新
本地访问	只能 JavaScript 与本地 API 进行交互，可能跨域	可以直接通过本地 API 与 Vue 页面进行交互或使用本地方法传递数据

使用CefSharp加载公网地址

1.安装IDE

注意：Vscode不能开发winform，所以直接安装VS2019。千万不要装最新版，最新版不支持.net 4.X，但Cefsharp基于.net 4.X.

官方网址：https://learn.microsoft.com/zh-cn/visualstudio/releases/2019/release-notes

安装时选择.Net桌面开发（大约8G）：
在这里插入图片描述

2. 环境准备

创建项目：
在这里插入图片描述

IDE自动生成项目初始化代码并进入设计界面：

打开包管理器：

选择CefSharp.WinForms：

注意：
如果NuGet包管理器无法使用，提示链接超时或被拒绝。进行以下操作：

关闭VS，删除C:\Users\xxx\AppData\Roaming\NuGet下的整个nuget.config文件。
CMD管理员权限执行以下：

reg add "HKLM\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" /v DisabledByDefault /t REG_DWORD /d 0 /f /reg:32
reg add "HKLM\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" /v DisabledByDefault /t REG_DWORD /d 0 /f /reg:64
reg add "HKLM\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" /v Enabled /t REG_DWORD /d 1 /f /reg:32
reg add "HKLM\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" /v Enabled /t REG_DWORD /d 1 /f /reg:64

选择X86平台：
如果没有，则新建。此处是为了兼容性选择了X86，否则无法在32位环境运行（向下兼容）。
在这里插入图片描述

注意：
CefSharp基于.Net4.X，所以当前项目版本必须是基于.Net 4.X,如果不是，可以在项目属性修改。
如果没有4.X的选项，则需要额外安装。

在这里插入图片描述

Cef必须使用对应的.net版本：
在这里插入图片描述

2.编程

using CefSharp;
using CefSharp.WinForms;public partial class Form1 : Form
{public Form1(){InitializeComponent();InitializeChromium();}private ChromiumWebBrowser chromeBrowser;private void InitializeChromium(){Cef.Initialize(new CefSettings());chromeBrowser = new ChromiumWebBrowser("https://www.baidu.com"){Dock = DockStyle.Fill};this.Controls.Add(chromeBrowser);}// 确保在程序关闭时释放资源protected override void OnFormClosing(FormClosingEventArgs e){chromeBrowser.Dispose();Cef.Shutdown();base.OnFormClosing(e);}
}

使用CefSharp加载 Vue 本地包

1.安装IDE

与前文一致

2.环境准备

与前文一致

3.编码

提前准备好前端界面代码包，执行命令打包前端程序：

npm run build

完成后，Vue.js 项目会生成一个 dist/ 或 build/ 文件夹，包含了 HTML、CSS、JS 等静态资源。

将 Vue 打包的静态文件放入本地资源路径。

使用C#加载打包文件：

using CefSharp;
using CefSharp.WinForms;public partial class Form1 : Form
{public Form1(){InitializeComponent();InitializeChromium();}private ChromiumWebBrowser chromeBrowser;private void InitializeChromium(){Cef.Initialize(new CefSettings());// 加载本地 Vue 包chromeBrowser = new ChromiumWebBrowser("file:///C:/你的自定义目录/vue/dist/index.html"){Dock = DockStyle.Fill};this.Controls.Add(chromeBrowser);}// 确保在程序关闭时释放资源protected override void OnFormClosing(FormClosingEventArgs e){chromeBrowser.Dispose();Cef.Shutdown();base.OnFormClosing(e);}
}