第一步 编译vue项目

#编译vue项目得到dist目录
npm run build 

#注意，路由模式需要是#模式 createWebHashHistory
import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory} from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

或者
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'

const router = createRouter({
  mode: process.env.IS_ELECTRON ? 'hash': 'history',
  history: process.env.IS_ELECTRON? createWebHashHistory(process.env.BASE_URL):createWebHistory(process.env.BASE_URL) ,
  routes
})

第二步，新建一个demo

vue create demo
#手动选择，不要代码检查，vue3.x和ts模式，
npm install -D ts-loader@8.4.0  #ts-loader版本需要低于9.0 原因9.0不支持 webpack 4
vue add electron-builder

#修改src/background.ts
import { ...Tray,Menu   } from 'electron'

const path = require('path');

async function createWindow() {
   const appIcon = new Tray(path.join(__dirname,'./app.png') )  //拖盘图标对就在文件在编译后的dist目录下，或者第一步的public目录下
   Menu.setApplicationMenu(null); //清除菜单   
   const win = new BrowserWindow({
    width: 1280,
    height: 768,
    //titleBarStyle: 'hidden' , //无标题栏
    //frame: false          //无边框
    //fullscreenable: true,  //全屏
    //fullscreen: true,
    //simpleFullscreen:true,
    icon: path.join(__dirname,'./app.png'),

app.on('ready', async () => {
   /*
   注释掉
   */ 
  createWindow()
})
if (isDevelopment) {
  /*
  注释掉
  */ 
}



#编译
yarn electron:serve
yarn electron:build

第三步复制文件，asar打包

第二步编译后 
复制 dist_electron/bundled/background.js 到第一步 /dist下
复制第一步package.json 到 /dist下
添加字段
{
  "main": "background.js",
  ...
}


在dist目录下运行
asar pack ./ default_app.asar

发布

下载electron-v0.25.1-darwin-x64r解压
我们就可以通过对文件的修改实现app桌面应用的定比如标题，关于，版本，图标等等
把app 复制到resources 下替换default_app.asar 
修改electron.exe为你要的名字即可

修改electron.exe图标和文件信息，Resource Hacker工具：http://www.angusj.com/resourcehacker/
右键更换图标
这其实并不够，我们还需要更换exe里面的版本信息，打开Version Info，把FileDescription和ProductName改成我们自己的项目名称，最好把SquirrelAwareVersion也更改一下，毕竟是版本号。