使用electron官方例子打包VUE项目

# 1、克隆官方demo

git clone https://github.com/electron/electron-quick-start

2、项目根目录下启动

npm install
npm start

如果出现窗口说明成功。

3、放入自己的项目。

vue项目打包好的文件在dist文件夹中。 将文件夹中的文件放在electron项目的根目录。 重新运行一下。

4、如果出现静态资源（图片和element文字图标）加载不出来

• vue 打包后页面空白 因为打包后的css和js的路径不正确

config/index.js

将build下，assetsPublicPath: '/', 修改为assetsPublicPath: './',

• 图片不显示

build/utils.js

添加 publicPath:'../../', 即可

5、打包exe文件

安装electron-builder

npm install electron-builder （会把安装的配置信息放在 dependencies 下，实际应该在 devDependencies 下）
或 
npm install electron-builder --save--dev （推荐）

安装之后应该把 dependencies 下的 "electron-builder": "^22.10.5" 放在 devDependencies 下面

"devDependencies": {
    "electron": "^12.0.2",
    "electron-builder": "^22.10.5"
},
"dependencies": {
}

在 package.json 下配置 build

"scripts": {
    "start": "electron .",
    "build": "electron-builder --win --x64"
},

在build 配置下 添加

"build": {
    "productName": "exe项目名称",
    "appId": "com.xxx.app",
    "copyright": "鄂ICP备********号",
    "mac": {
      "target": [
        "dmg",
        "zip"
      ]
    },
    "win": {
      "icon": "build/icons/icon.ico", //程序小图标
      "target": [
        "nsis",
        "zip"
      ]
  },
    "electronDownload": {
    "mirror": "https://npm.taobao.org/mirrors/electron/"   //淘宝镜像
  }
},

6、运行 npm run build

打包好的文件在 dist 文件夹下

注意：vue项目的 router 设置必须是 hash 模式