前言

歷經(jīng)3天大致搞懂了,基于vue/cli4的electron的框架

搭建框架

npm install -g @vue/cli-service-global // 全局安裝vue腳手架
vue create my-electron-vue // 創(chuàng)建腳手架

cd my-electron-vue

vue add electron-builder // 安裝electron,這里我選擇的是9.0

yarn run electron:serve // 環(huán)境沒搭錯(cuò)的情況下應(yīng)該能運(yùn)行成功

在項(xiàng)目根目錄 創(chuàng)建一個(gè).npmrc文件 寫入以下信息

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

以上信息是為了項(xiàng)目打包的時(shí)候可以應(yīng)用淘寶鏡像下載打包環(huán)境,因?yàn)閲?guó)內(nèi)好像無(wú)法訪問或者延遲較高,所以配置下可以提升打包成功率

在項(xiàng)目根目錄創(chuàng)建一個(gè)vue.config.js文件

module.exports={
    pluginOptions: {
        electronBuilder: {
            outputDir: "electron_bulid",//打包后輸出的目錄名
            builderOptions: {
                "productName": "vue測(cè)試項(xiàng)目", //包名
                "appId": "com.electron.vue_demo",//項(xiàng)目id
                "files": [
                    "**/*",
                ],
                "extraFiles": [
                    {
                        "from": "./resource/*", // 項(xiàng)目資源
                        "to": "./resource" // 打包后輸出到的按照目錄資源
                    }
                ]
            }
        }
    },

}

配置完成后運(yùn)行yarn run electron:build進(jìn)行打包
打包完成后根目錄下回多出electron_bulid文件夾,里面就有vue測(cè)試項(xiàng)目 stepxxx.exe文件雙擊安裝成功,你的第一個(gè)electron應(yīng)用就這樣完美的出來了

結(jié)尾

以上示例我會(huì)放到github項(xiàng)目