Vite 是一款快速的
前端构建工具，它基于 ES modules 优化的开发服务器和构建工具，可以实现秒级的热更新和快速的构建
打包。在结合 Vue 框架
使用时，可以快速搭建和开发一个 Vue 项目。
在
使用 Vite 和 Vue 结合开发
Electron 项目时，可以按照以下步骤进行操作：
1. 创建项目
首先需要创建一个空的
Electron 项目，可以
使用 electron-forge 来创建：
```
npx create
-electron-app my
-app
```
2. 安装依赖
进入项目目录，安装
Vite 和 Vue 相关依赖：
```
cd my
-app
npm install
vite vue@next vue
-router@4
```
3. 配置
Vite
在项目根目录下创建一个
vite.config.js 文件，用来配置
Vite 的相关选项：
```
javascript
//
vite.config.js
const path = require('path')
module.exports = {
// 入口文件
main: 'src/main.js',
// 输出目录
outDir: 'dist',
// 生产模式关闭 sourcemap
productionSourceMap: false,
// 开发模式下的服务器配置
server: {
port: 3000,
open: true,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
}
```
4. 编写 Vue 组件
在 src 目录下创建一个 App.vue 文件，用来编写 Vue 组件：
```vue
<template>
<div>
<h1>{{ title }}</h1>
<router
-link to="/">Home</router
-link>
<router
-link to="/about">About</router
-link>
<router
-view></router
-view>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import { RouterLink, RouterView } from 'vue
-router'
export default defineComponent({
name: 'App',
components: {
RouterLink,
RouterView
},
data () {
return {
title: 'Hello
Vite Electron!'
}
}
})
</script>
```
5. 编写入口文件
在 src 目录下创建一个 main.js 文件，用来编写
Electron 的入口文件和 Vue 的启动代码：
```
javascript
// src/main.js
const { app, BrowserWindow } = require('
electron')
const path = require('path')
const isDev = require('
electron-is
-dev')
const { createServer } = require('
vite')
const { createProtocol } = require('vue
-cli
-plugin
-electron-builder/lib')
async function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
devTools: isDev
}
})
// 加载应用主页面
if (isDev) {
// 开发模式下
使用 Vite 的开发服务器
const
viteServer = await createServer()
await
viteServer.listen()
await win.loadURL(`http://localhost:3000`)
} else {
// 生产模式下加载静态页面
createProtocol('app')
await win.loadURL(`app://./index.html`)
}
}
app.whenReady().then(createWindow)
```
6. 配置 package.json
在 package.json 文件中添加以下代码，用来启动
Electron 应用：
```json
{
"scripts": {
"serve": "
vite",
"build": "
vite build",
"start": "
electron ."
}
}
```
7. 运行应用
在终端中运行以下命令，启动开发模式下的应用：
```
npm run serve
npm run start
```
在浏览器中打开 http://localhost:3000 可以看到应用已经成功运行。
8.
打包应用
在终端中运行以下命令，
打包生产模式下的应用：
```
npm run build
```
打包完成后，在 dist 目录下会生成一个可执行的应用
程序和相关资源文件。
以上就是
使用 Vite 和 Vue 结合开发
Electron 项目的详细介绍。
本文详细介绍了如何使用Electron和Vite构建的Web应用通过Forge进行打包，包括Forge及依赖的安装，web应用打包生成dist包，脚本转换，以及最终打包成可执行文件的过程和验证方法。
扫一扫
2984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
