README.en.md

electron-builder-templete

Description

这是一个使用electron和electron-builder对前端静态文件进行打包成exe文件的模板 一个基本的Electron应用程序只需要这些文件：

-package.json-指向应用程序的主文件并列出其详细信息和依赖项。

-main.js-启动应用程序并创建一个浏览器窗口来呈现HTML。这是应用程序的主进程。

-index.html-要呈现的网页。这是应用程序的渲染器进程。

-preload.js-在加载渲染器进程之前运行的内容脚本。

To Use

# Clone this repository
git clone https://github.com/zhanghaifei1997/electron-builder-templete.git

# Go into the repository
cd electron-builder-templete

# Install dependencies
npm/yarn install

# Run the app
npm/yarn start

#build the app

npm/yarn run electron:build

注意，如果是vue或者其他项目打成的dist包，一定要在打包之前修改一下vue项目的静态资源打包后的加载路径改成 [ ./ ]

找到vue.config.js进行修改文件加载路径：
export default defineConfig({
  plugins: [vue()],
  // base: path.resolve(__dirname, './dist/'), // 之前的
  base: './', // 修改后的-->修改的这里
  server: {
    port: 8888,
    cors: true, // 允许跨域
    hmr: true, // 开启热更新
  },
})

Resources for Learning Electron

本示例是利用electorn官方的模板 + vue-element-plus-admin打包后的dist包 dist包就是大家真实需要打包的项目文件可自行替换成自己的项目文件。

• electronjs.org/docs - all of Electron's documentation
• Electron Fiddle - Electron Fiddle, an app to test small Electron experiments