构建Vue3桌面应用程序的方法
在本文中，我们将研究如何通过 Vite 开发 Vue 3 桌面项目。
在项目中会用到 ， 一种最流行的框架，可使用Javascript构建跨平台的桌面应用程序。 因此，许多受欢迎的应用程序都在使用Electron，例如VSCode，Slack，Twitch等。
先看看要做什么：
尽管这只是一个 Vite 的基本模板，但它跑在专用程序而不是浏览器中。 这是构建自己的桌面应用的必要步骤。
以下是开发过程。
创建的基本 Vite 程序
首先创建 Vite 应用。 在这里不会过多介绍 Vite 的工作原理。
在终端下执行以下命令：
npm init @vitejs/app cd [project-name] npm install
完成了，先在浏览器中试一下。
在终端中简单的运行 npm run dev 命令。然后在浏览器中打开本机地址，可以看到是这样的：
没有问题，接着就该把 Electron 添加到它的设置中了。
在 Vite 项目中添加 Electron
这里按照 在我们的 Vite 应用中进行一些调整。
首先安装 Electron。在终端下输入以下命令：
Install Electronnpm install --save-dev electron
接着再看一下 Electron 手册。
手册上说简单的 Electron 配置需要四个文件：
- package.json —— 这个已经有了
- main.js
- preloader.js
- index.html
看上去项目中已经有了 main.js和index.html文件，但它们是 Vite 的文件，而不是 Electron 的文件。 Vite 的文件只能用于运行 Vite 程序，所以还需要提供单独的 Electron 文件。
main.js 用于创建桌面程序并加载到 index.html 中，它还应该包括我们构建的 Vite 程序代码。
构建 Vite 程序
所以首先必须构建 Vite 程序。 因为要把它与 Electron 进行整合，所以还需要做一些额外的配置。我们要确保在构建项目时，对最终 javascript 和 css 文件的所有引用都指向正确的路径。
要构建的 Vite 项目将会创建以下结构的 dist 目录。
但是由于我们的 Electron 代码位于项目的根目录中，所以应该将整个项目的基础设置为 dist 文件夹。 可以通过 path 库在 vite.config.js 文件中设置 base 属性来实现。
//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
base: path.resolve(__dirname, './dist/'),
plugins: [vue()]
})
现在可以在终端中运行 npm run build 来创建 dist 目录了。
设置 Electron 的 main.js
下一步是在项目的根目录中创建 main.js 文件。
创建完毕后我们只需要从 Electron quick start guide 中复制粘贴代码就行了。
在我们加载 index.html 的地方，要将其改为 dist/index.html，以便在 dist 目录中使用该文件。
所以 main.js 中的最终代码是这样：
//main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('dist/index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
创建并编写 preload.js.
接下来让在项目根目录中创建 preload.js 文件，然后再次使用，这次不必修改任何内容。
//preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
修改 package.json
差不多快要完成了，最后还需要对 package.json文件进行一些修改，以便运行 Electron 命令。
首先要设置 main 属性，在默认情况下，Electron 会在根目录中查找 index.js 文件并执行，但是由于我们的文件名为 main.js，所以需要在 package.json 中定义。
//package.json
{
"name": "vite-electron",
"version": "0.0.0",
"main": "main.js", // 这一行
...
}
然后设置运行 Electron 的方式，在 scripts 部分中新创建一个名为electron:start 的脚本，内容是electron . 。
//package.json
{
"name": "vite-electron",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron:start": "electron ." // 这里
},
...
}
以上就是所有的代码了。
最后在终端中执行： npm run electron:start 命令，然后就能看到：
桌面程序终于完成了，很简单吧～
写在最后
近期在提升 Vue 的过程中，发现一个高逼格的 Vue3+TS 教程。 无偿分享给掘仔们，
到此这篇关于构建Vue3桌面应用程序的方法的文章就介绍到这了,更多相关Vue3桌面应用程序内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！