安装electron 和编译打包的过程

CDialog

已于 2022-11-20 08:56:14 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue相关开发文章标签： electron javascript 前端

于 2022-11-20 08:54:08 首次发布

本文链接：https://blog.youkuaiyun.com/CDialog/article/details/127944987

vue相关开发专栏收录该内容

7 篇文章

订阅专栏

本文档详细介绍了如何从零开始安装配置Node.js、Vue CLI，并使用Vite脚手架创建Vue3与Electron结合的跨平台桌面应用程序。包括环境搭建、项目初始化、依赖安装及运行测试等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装nodejs稳定版，切记稳定版

2.一定要删掉系统中的python

#webpack-dev-server vue下用来生成项目，不确定

#npm install -g vue-route 这个不确定装不装，如果有问题就删了吧

3.安装vue4

npm install -g @vue/cli@4

4.根据脚手架创建项目目录

npx degit dcloudio/uni-preset-vue#vite uni-vue3-electron

5.进入项目目录

cd .\uni-vue3-electron\

6.根目录下创建代码

mkdir electron

新建main.js

// main.js 中内容如下

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
  })
  // 注意: 该路径为uniapp 发行H5/PC后生成的文件路径
  win.loadFile('dist/build/h5/index.html')
  // win.webContents.openDevTools() // 开启调试工具
}
app.whenReady().then(() => {
  createWindow()
	app.on('activate', () => {
		if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

修改配置文件vite.config.js

增加一行 base:'./', // 新增

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/
export default defineConfig({
  base:'./', // 新增
  plugins: [
    uni(),
  ],
})

7.安装依赖包

npm install

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

npm install -D electron

8.开发模式下跑起来

npm run dev:electron

npm run build:h5 这个命令生成h5文件但是跑不起来

忘记下面装这个是干嘛的了，先记录下来

npm run-script packager

npm run-script electron

过程中切换淘宝安装源

npm config set registry https://registry.npm.taobao.org/