如何开发Vite3插件构建Electron开发环境( 三 ) _生活百科

vite.config.ts 文件中引入一下就可以使用了，如下代码所示：
// vite.config.tsimport { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { devPlugin } from "./plugins/devPlugin";import optimizer from "vite-plugin-optimizer";export default defineConfig({plugins: [devPlugin(), vue()],});现在执行命令 npm run dev，你会看到 Electron 应用加载了 Vue 的首页，如下图所示：
关闭窗口，主进程和子进程也会跟着退出。修改一下 Vue 组件里的内容，窗口内显示的内容也会跟着变化，说明热更新机制在起作用。

文章插图
渲染进程集成内置模块现在主进程内可以自由的使用 Electron 和 Node.js 的内置模块了，但渲染进程还不行，接下去我们就为渲染进程集成这些内置模块。
首先我们修改一下主进程的代码，打开渲染进程的一些开关，允许渲染进程使用 Node.js 的内置模块，如下代码所示：

// src\main\mainEntry.tsimport { app, BrowserWindow } from "electron";process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = "true";let mainWindow: BrowserWindow;app.whenReady().then(() => {let config = {webPreferences: {nodeIntegration: true,webSecurity: false,allowRunningInsecureContent: true,contextIsolation: false,webviewTag: true,spellcheck: false,disableHtmlFullscreenWindowResize: true,},};mainWindow = new BrowserWindow(config);mainWindow.webContents.openDevTools({ mode: "undocked" });mainWindow.loadURL(process.argv[2]);});

在这段代码中，有以下几点需要注意：
1：ELECTRON_DISABLE_SECURITY_WARNINGS 用于设置渲染进程开发者调试工具的警告，这里设置为 true 就不会再显示任何警告了。

如果渲染进程的代码可以访问 Node.js 的内置模块，而且渲染进程加载的页面（或脚本）是第三方开发的，那么恶意第三方就有可能使用 Node.js 的内置模块伤害最终用户。这就是为什么这里要有这些警告的原因。如果你的应用不会加载任何第三方的页面或脚本。那么就不用担心这些安全问题啦。

2：nodeIntegration配置项的作用是把 Node.js 环境集成到渲染进程中，contextIsolation配置项的作用是在同一个 JavaScript 上下文中使用 Electron API 。其他配置项与本文主旨无关，大家感兴趣的话可以自己翻阅官方文档。
3: webContents的openDevTools方法用于打开开发者调试工具
完成这些工作后我们就可以在开发者调试工具中访问 Node.js 和 Electron 的内置模块了。
设置 Vite 模块别名与模块解析钩子虽然我们可以在开发者调试工具中使用 Node.js 和 Electron 的内置模块，但现在还不能在 Vue 的页面内使用这些模块。
这是因为 Vite 主动屏蔽了这些内置的模块，如果开发者强行引入它们，那么大概率会得到如下报错：
Module "xxxx" has been externalized for browser compatibility and cannot be accessed in client code.接下去我们就介绍如何让 Vite 加载 Electron 的内置模块和 Node.js 的内置模块。
首先我们为工程安装一个 Vite 组件：vite-plugin-optimizer
npm i vite-plugin-optimizer -D然后修改 vite.config.ts 的代码，让 Vite 加载这个插件，如下代码所示：

// vite.config.tsimport { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { devPlugin, getReplacer } from "./plugins/devPlugin";import optimizer from "vite-plugin-optimizer";export default defineConfig({plugins: [optimizer(getReplacer()), devPlugin(), vue()],});

vite-plugin-optimizer 插件会为你创建一个临时目录：node_modules.vite-plugin-optimizer
然后把类似