摘要：在開發(fā)環(huán)境下，我是將獲取的字體文件遠(yuǎn)程地址寫進(jìn)，這樣解決了問題。

原文地址： http://wushaobin.top/2017/08/...

安裝node： * https://nodejs.org/en/download/

配置webpack： npm install -g webpack(sudo權(quán)限)

windows配置cnpm：

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    因?yàn)閚pm的默認(rèn)倉庫在國(guó)外，下載很慢，國(guó)內(nèi)淘寶搞了個(gè)CNPM，每10分鐘同步一次，完全夠用了

當(dāng)然也可以使用yarn下載

    npm install -g yarn
    yarn install

進(jìn)入項(xiàng)目目錄

執(zhí)行cnpm install

cnpm install之后，可能會(huì)由于網(wǎng)絡(luò)不好而導(dǎo)致一些包安裝不完整，這里推薦使用yarn進(jìn)行安裝
需要額外安裝vue-style-loader、vue-template-compiler，不然vue-loader會(huì)報(bào)錯(cuò)
electron配置項(xiàng)（config.js）為true時(shí)，運(yùn)行npm run dev，瀏覽器訪問會(huì)報(bào)錯(cuò)， Uncaught ReferenceError: require is not defined，原因可以去這里看，由于配置config.electron是開啟狀態(tài)，于是require被browserified化了，不是原先node原生require函數(shù)，所以在browser會(huì)出現(xiàn)此問題
應(yīng)用打包的時(shí)候，需要注意package.json的main配置項(xiàng)main，必須指向electron的主線程文件，此處為app/index.js

對(duì)于webpack對(duì)于引入字體文件一直都會(huì)有問題，有時(shí)候你使用了file-laoder，url-loader，但是在使用還是會(huì)存在一些問題，比如渲染進(jìn)程入口文件components/App.vue希望引入common.scss，common.scss會(huì)去@import iconfont.css(字體樣式)，這時(shí)候iconfont.css的字體路徑就會(huì)出現(xiàn)問題，webpack一直提示找不到依賴路徑。在開發(fā)環(huán)境下，我是將iconfont.cn獲取的字體文件遠(yuǎn)程地址寫進(jìn)build/index.html，這樣解決了問題。正式環(huán)境下，可以將字體文件代碼引入到App.vue文件中去

[ ] mac安裝包生成

[ ] 新增各個(gè)模塊功能

[x] windows安裝包生成 -- 完成

[x] 應(yīng)用自動(dòng)更新 -- 完成

[x] 中英文切換 -- 完成

[x] 全局快捷鍵綁定 -- 完成

[x] 即時(shí)通訊功能 -- 完成

[x] excel表格導(dǎo)入導(dǎo)出 -- 完成

[x] 登錄功能 -- 完成

[x] mock.easy提供數(shù)據(jù) -- 完成

development:

$ npm run dev
# express開啟服務(wù)，可以通過`http://localhost:port`訪問（熱重載）
# 原理：通過electron創(chuàng)建主體窗口，`mainWindow.loadURL(http://localhost:port)`，加載應(yīng)用的 index.html

$ npm run app
# 運(yùn)行`electron ./`,生成桌面應(yīng)用

socket.io:

$ npm run socket

使用express + mongoDB + socket.io引入基于node的即時(shí)通訊模塊

本地調(diào)試時(shí)，只需運(yùn)行npm run dev => npm run app，需要開啟即時(shí)通訊的功能的需要npm run sock，這里需要注意即時(shí)通訊模塊目前沒有遷移至服務(wù)器，要在本地運(yùn)行，需要使用express起一個(gè)服務(wù)（./socket/），這里的數(shù)據(jù)庫集成使用的是mongoDB，所以必須要安裝mongoDB，然后配置環(huán)境變量（比如說我安裝的目錄是d:，我的環(huán)境變量這樣配置，D:Program FilesMongoDBServer3.4in），這樣之后，便可以使用mongod、mongo命令了，執(zhí)行mongod命令，一般會(huì)報(bào)錯(cuò)，默認(rèn)存儲(chǔ)文檔的目錄沒有，那可以這樣，新建一個(gè)文件夾，用來存儲(chǔ)mongo產(chǎn)生的文檔對(duì)象，執(zhí)行mongod --dbpath D:mongodbdb，至于mongo(models/sechemas)、socket.io、express如何搭配去實(shí)現(xiàn)即時(shí)通訊的的功能，具體可以看代碼如何實(shí)現(xiàn)，對(duì)于這些新的東西，也只是了解個(gè)大概，后面準(zhǔn)備花些時(shí)間去深入學(xué)習(xí)。

production:

$ npm run build
＃生成正式文件到app/dist目錄（eletron應(yīng)用目錄）

package:

$ npm run package:mac
$ npm run package:win
$ npm run package:linux
$ npm run package

將上一步`npm run build`后生成的正式文件，進(jìn)行打包，生成程序，打包至`./package`目錄中

setup:

$ npm run setup

這里生成安裝包（僅適合于window），將上一步生成的package，通過grunt和grunt-electron-installer完成打包，打包至`./package_dir`

生成安裝包的過程：

npm run build
npm run package:win（目前只支持window）
npm run setup

對(duì)于打包工具，這里使用的是electron-packager，安裝命令：

rimraf package && electron-packager . TEST --platform=win32 --arch=x64 --overwrite --icon=hosts.ico --out=./package --electron-version=1.6.11 --version-string.CompanyName=TEST --version-string.ProductName=TEST --ignore="(build|client$|static|theme|.gitignore|LICENSE|README.md|.editorconfig|.eslintrc|node_modules|gruntPackage.json|Gruntfile.js|yarn.lock|socket|package_dir|git_img)"

參數(shù)：

. => 應(yīng)用目錄

TEST => 應(yīng)用名稱

--platform=win32 => 要打包的平臺(tái)

--overwrite => 覆蓋模式安裝

--icon=hosts.ico => 應(yīng)用圖標(biāo)（window時(shí)可以是.ico、.png，mac時(shí)可以為.icns）

--out=./package => 輸出目錄

--electron-version => electron版本

--version-string.CompanyName=TEST --version-string.ProductName=TEST => 為了生成安裝包的時(shí)候，應(yīng)用名字為TEST，而不是默認(rèn)的electron


--ignore=XXX => 忽略打包的目錄

詳細(xì)可看這里

打包成安裝程序，需要使用到grunt、grunt-electron-installer,請(qǐng)保證事先安裝好
在package.json設(shè)置：

{
    "version": "1.0.0", // 這個(gè)是必須的，為了后面使用electron updater實(shí)現(xiàn)自動(dòng)更新
    "productName": "my-electron",
    "description": "My Superb Vue Project For Electron",
    ......
}

Gruntfile.js文件如下詳細(xì)：

var grunt = require("grunt")

// 配置
grunt.config.init({
    pkg: grunt.file.readJSON("package.json"), // 這里會(huì)去獲取版本號(hào)
    "create-windows-installer": {
        x64: {
            authors: "xiaobinwu ", // 作者
            projectUrl: "",
            appDirectory: "./package/TEST-win32-x64", // 要打包的輸入目錄
            outputDirectory: "./package_dir", // grunt打包后的輸出目錄
            exe: "TEST.exe", // 生成的exe文件
            description: "My Superb Vue Project For Electron",
            setupIcon: "./app/hots.ico", // 圖標(biāo)
            noMsi: true // 是否生成.msi
        }
    }
})

// 加載任務(wù)
grunt.loadNpmTasks("grunt-electron-installer")

// 設(shè)置為默認(rèn)
grunt.registerTask("default", ["create-windows-installer"])

于是就會(huì)生成如上圖所示的my-electronSetup.exe，點(diǎn)擊運(yùn)行，進(jìn)入一個(gè)安裝的過程，會(huì)有安裝的小動(dòng)畫，如下圖：

而我們需要的是安裝完后自動(dòng)生成快捷方式，這里使用的electron-squirrel-startupnpm包，然后在主線程文件中app/index.js中寫入startupEventHandle方法，安裝時(shí)觸發(fā)squirrel.window的一些命令，將其放在創(chuàng)建主體窗口的回調(diào)函數(shù)中，代碼如下：

app.on("ready", function(){
    ......
    startupEventHandle()
    ......
})
......

function startupEventHandle () {
    if (require("electron-squirrel-startup")) { return }
    // 安裝和更新時(shí)添加快捷方式，刪除和卸載時(shí)刪除快捷方式
    var handleStartupEvent = function () {
        if (process.platform !== "win32") {
            return false
        }
        var squirrelCommand = process.argv[1]
        switch (squirrelCommand) {
            case "--squirrel-install":
            case "--squirrel-updated":
                install()
                return true
            case "--squirrel-uninstall":
                uninstall()
                app.quit()
                return true
            case "--squirrel-obsolete":
                app.quit()
                return true
        }
        // 安裝
        function install () {
            var cp = require("child_process")
            var updateDotExe = path.resolve(path.dirname(process.execPath), "..", "update.exe")
            var target = path.basename(process.execPath)
            var child = cp.spawn(updateDotExe, ["--createShortcut", target], { detached: true })
            child.on("close", function (code) {
                app.quit()
            })
        }
        // 卸載
        function uninstall () {
            var cp = require("child_process")
            var updateDotExe = path.resolve(path.dirname(process.execPath), "..", "update.exe")
            var target = path.basename(process.execPath)
            var child = cp.spawn(updateDotExe, ["--removeShortcut", target], { detached: true })
            child.on("close", function (code) {
                app.quit()
            })
        }
    }
    if (handleStartupEvent()) {
        return
    }
}

這樣便可以在安裝時(shí)生成快捷方式，卸載時(shí)刪除快捷方式了，在這個(gè)過程中，有可能回報(bào)electron-squirrel-startup module not found類似的錯(cuò)誤，那是electron-packager打包時(shí)，過濾掉了node_moudles目錄，所以需要手動(dòng)添加到生成的package里面。至于網(wǎng)上的一些教程說，是需要安裝vs2015環(huán)境，并且將msbuild程序聲明成環(huán)境變量，但是我覺得應(yīng)該是缺少npm包的原因，大家也可以試試，我本地是本來就安裝過vs2015的,而且安裝包沒辦法自定義安裝目錄，默認(rèn)都是安裝在C:UsersWushaobinAppDataLocalXXX下面的。

lint:

$ npm run lint
# lint項(xiàng)目（配置規(guī)則：.eslintrc）

上面的npm run script命令可能有些多，涉及的內(nèi)容也比較多，文章后面會(huì)一一講解！下面上一波效果圖：

前面我們也有提到過自動(dòng)更新，這里使用的官方提供的electron.autoUpdater模塊去更新，坑爹的是官方對(duì)這一功能的描述真是少之又少，autoUpdater的一些方法和事件這里可以去了解清楚，autoUpdater.setFeedURL(url)這一方法是重中之重，url放著高版本的文件(.exe,.nupkg,RELEASES)，這里我是存儲(chǔ)在阿里oss,然后autoUpdater.checkForUpdates()會(huì)去檢查是否需要更新，它會(huì)觸發(fā)error、checking-for-update、update-available、update-downloaded中的一些事件，而我們需要利用主進(jìn)程跟渲染進(jìn)程之間的通訊（ipc/remote/webContent），來觸發(fā)更新，具體代碼如下：

function updateHandle () {
    ipcMain.on("check-for-update", function (event, arg) {
        if (process.platform !== "win32") {
            return false
        }
        let appName = "門店系統(tǒng)"
        let appIcon = __dirname + "/hots.ico"
        let message = {
            error: "檢查更新出錯(cuò)",
            checking: "正在檢查更新……",
            updateAva: "下載更新成功",
            updateNotAva: "現(xiàn)在使用的就是最新版本，不用更新",
            downloaded: "最新版本已下載，將在重啟程序后更新"
        }
        const os = require("os")
        const { dialog } = require("electron")
        // 放最新版本文件的文件夾的服務(wù)器地址
        // 阿里oss
        autoUpdater.setFeedURL("http://electron20170815.oss-cn-beijing.aliyuncs.com/electron/")
        autoUpdater.on("error", function (error) {
            return dialog.showMessageBox(mainWindow, {
                type: "info",
                icon: appIcon,
                buttons: ["OK"],
                title: appName,
                message: message.error,
                detail: "
" + error
            })
        })
        .on("checking-for-update", function (e) {
            return dialog.showMessageBox(mainWindow, {
                type: "info",
                icon: appIcon,
                buttons: ["OK"],
                title: appName,
                message: message.checking
            })
        })
        .on("update-available", function (e) {
            var downloadConfirmation = dialog.showMessageBox(mainWindow, {
                type: "info",
                icon: appIcon,
                buttons: ["OK"],
                title: appName,
                message: message.updateAva
            })
            if (downloadConfirmation === 0) {
                return
            }
        })
        .on("update-not-available", function (e) {
            return dialog.showMessageBox(mainWindow, {
                type: "info",
                icon: appIcon,
                buttons: ["OK"],
                title: appName,
                message: message.updateNotAva
            })
        })
        .on("update-downloaded",  function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
            var index = dialog.showMessageBox(mainWindow, {
                type: "info",
                icon: appIcon,
                buttons: ["現(xiàn)在重啟", "稍后重啟"],
                title: appName,
                message: message.downloaded,
                detail: releaseName + "

" + releaseNotes
            })
            if (index === 1) { return }
            autoUpdater.quitAndInstall()
        })
        autoUpdater.checkForUpdates()
    })
}

如果內(nèi)容對(duì)你有幫助的話，可以去github給個(gè)star?。。?！

參考資料：
https://segmentfault.com/a/1190000008287730
https://segmentfault.com/a/1190000007616641
https://juejin.im/entry/5805e39ad20309006854e58f
https://github.com/hua1995116/webchat

Generated by VuePack.
vuePack Issue