通过vue/cli4生成的electron 打包的一些坑

前言

历经3天大致搞懂了,基于vue/cli4的electron的框架

搭建框架

npm install -g @vue/cli-service-global // 全局安装vue脚手架
vue create my-electron-vue // 创建脚手架

cd my-electron-vue

vue add electron-builder // 安装electron,这里我选择的是9.0

yarn run electron:serve // 环境没搭错的情况下应该能运行成功

在项目根目录 创建一个.npmrc文件 写入以下信息

electron_mirror="https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror="http://npm.taobao.org/mirrors/electron-builder-binaries/"

以上信息是为了项目打包的时候可以应用淘宝镜像下载打包环境,因为国内好像无法访问或者延迟较高,所以配置下可以提升打包成功率

在项目根目录创建一个vue.config.js文件

module.exports={
    pluginOptions: {
        electronBuilder: {
            outputDir: "electron_bulid",//打包后输出的目录名
            builderOptions: {
                "productName": "vue测试项目", //包名
                "appId": "com.electron.vue_demo",//项目id
                "files": [
                    "**/*",
                ],
                "extraFiles": [
                    {
                        "from": "./resource/*", // 项目资源
                        "to": "./resource" // 打包后输出到的按照目录资源
                    }
                ]
            }
        }
    },

}

配置完成后运行yarn run electron:build进行打包
打包完成后根目录下回多出electron_bulid文件夹,里面就有vue测试项目 stepxxx.exe文件双击安装成功,你的第一个electron应用就这样完美的出来了

结尾

以上示例我会放到github项目