electron 將 vue項目打包成桌面應用(exe文件)

目標如題
首先你需要一個VUE項目
簡單創建一個栗子

// 這是vue-cli 3.0的創建方式 2+版本好像是 vue init webpack my-app 貌似
vue create my-app

這裏不做具體 畢竟每個人的項目不一樣 如果也是想嘗試一下 大家可以一路默認創建一個項目就可以了

安裝electron 不知道的戳鏈接https://blog.csdn.net/zcy_csdn123/article/details/102485857
簡單的說 正常安裝太慢太慢 使用淘寶鏡像
然後克隆一個electron 官網的例子

# 克隆這倉庫
$ git clone https://github.com/electron/electron-quick-start
# 進入倉庫
$ cd electron-quick-start
# 安裝依賴庫
$ npm install
# 運行應用
$ npm start

然後 你得到了兩個項目 my-app electron-quick-start
分別啓動這兩個項目 看是否能正常運行
VUE的不說了，electron 的項目啓動後 彈出一個應用框， 裏面有hello word 內容

下面是重點了
在my-app項目的package.json 中scripts下添加2行 如下

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron_dev": "npm run build && electron build/electron.js", // 添加
    "electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --icon=./public/favicon.ico --overwrite"// 添加
  },

第二天命令的解釋
electron-packager –platform= –arch= [optional flags…]
sourcedir 資源路徑，在本例中既是./dist/
appname 打包出的exe名稱
platform 平臺名稱（windows是win32）
arch 版本，本例爲x64

這兩行是electron的啓動 和打包命令
分別用了electron 和electron-packager
安裝這兩個
切換到my-app項目下

npm intall electron --save-dev
npm install electron-packager --save-dev

electron_dev 命令前的準備，就是需要將vue.config.js 中的publicPath: ‘/’ 修改爲 ‘./’
創建完項目沒有vue.config.js 創建一個 並填充內容

// 基本路徑
    publicPath: './', // 爲了electron 從/ 改成./

這樣electron_dev 命令就可以找到正確的路徑
vue.config.js 我是用的 因爲這個項目裏面什麼都沒有就是基本的 所以這個配置也是基本的 具體大家根據自己項目更改，若是想學了這個 基本不用管 複製過去就好

module.exports = {
    // 基本路徑
    publicPath: './', // 爲了electron 從/ 改成./
    // 輸出文件目錄
    outputDir: 'dist',
    // eslint-loader 是否在保存的時候檢查
    lintOnSave: true,
    // webpack配置
    chainWebpack: () => { },
    configureWebpack: () => { },
    // 生產環境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相關配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: true,
        // 開啓 CSS source maps?
        sourceMap: false,
        // css預設器配置項
        loaderOptions: {},
        // 啓用 CSS modules for all css / pre-processor files.
        modules: false
    },
    parallel: require('os').cpus().length > 1,
    pwa: {},
    // webpack-dev-server 相關配置
    devServer: {
        open: true,                                 //配置自動啓動瀏覽器
        host: 'localhost',
        port: 8080,                                 // 端口號
        https: false,
        hotOnly: false,                             // https:{type:Boolean}
                                           // 配置跨域處理,只有一個代理
        before: app => { }
    },
    // 第三方插件配置
    pluginOptions: {}
}

將electron-quick-start 中的main.js 複製到my-app build下並改名字爲electron.js
因爲vue-cli 3.0 安裝的項目沒有build 目錄 所以自己創建一個就可以
使用electron_dev 命令可以開啓一個應用框 裏面顯示我們VUE項目的內容
最終my-app項目的目錄結構

.history 是編輯器帶的 自動忽略
build是我創建的裏面包含electron.js
vue.config.js是後創建的

elecctron_build 命令 前的準備
使用electron_build 命令 可以將項目打包成一個.exe文件 我們雙擊文件就能打開 也就是最終的桌面應用

1、將運行npm run build 打出一個dist文件 (其實我們在使用electron_dev 命令的時候就已經打出dist文件)
2、將electron.js 複製到dist 文件下
3. 修改路徑

  mainWindow.loadURL(`file://${__dirname}/index.html`)

4、將electron-quick-start 中的package.json 複製到dist文件下
最終看下dist文件夾內的內容

electron.js 其實就是electron-quick-start中的main.js
package.json 也是electron-quick-start中的

最後使用命令 npm run electron_build 可以打出一個文件夾 裏面有.exe文件 就是想要的

說一下注意事項 已經我出過的問題
1、路徑最重要 一切都正常就是打開後空白頁面 很大程度在路徑 確認下找的路徑 是否正確
2、我曾經出現過electron_dev 可以正常顯示 但是使用electron_build時報沒有electron 模塊的錯誤
因爲我之前使用cnpm install electron-packager 之後用npm 安裝就可以了