“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Keep track of the pits you stepped in when you first started using electron

Website: www.electronjs.org/

Use electron vue to build and configure demo: github.com/F-howk/elec…

Scaffolding for reference: www.cnblogs.com/alex96/p/12…

Pay attention to the point

The.electron-vue folder is where some webpack configurations and agents need to be changed manually

Publish is configured in package.json when updates are needed

"publish": [
      {
        "provider": "generic",
        "url": "xxx"
      }
    ]
Copy the code

And register updated events with the main process

let updating = false; autoUpdater.on('error', function () { updating = false; }) autoUpdater.on('update-available', function (info) { console.log('update-available'); updating = true; autoUpdater.downloadUpdate() }) autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { autoUpdater.quitAndInstall(true, true) mainWindow.destroy() }) ipcMain.on('checkForUpdate', () => {if (updating) return // Perform automatic update check console.log('checkForUpdate'); autoUpdater.checkForUpdates() })Copy the code

At that time after doing a good look forward to the update, due to the use of automatic update and is a lot of updates together, so the server bandwidth is full!! In the middle of downloading the installation package, the client started to download a new installation package because of network problems. So need to update when downloading the installation package lock!

Finally, throw.exe.blockmap latest. Yml onto the server

Be careful when using vuex

import Vue from 'vue' import Vuex from 'vuex' import { createPersistedState, createSharedMutations } from 'vuex-electron' import modules from './modules' Vue.use(Vuex) export default new Vuex.Store({ modules, plugins: [ createPersistedState(), //createSharedMutations() ], strict: process.env.NODE_ENV ! == 'production' })Copy the code

Note out createSharedMutations() if you don’t need to share data across multiple processes. If you do not comment out data on multiple projects, you will find that your vuEX data is displayed on several ends simultaneously. If you name it the same, it will cause data clutter and contamination

The main process and the renderer process usually use IPC to communicate with each other, but of course the most important thing for a client is to record logs using the electron log package, ToJSON () is not a function, so it is best to print JSON serialized strings

log.transports.file.level = "silly";
console.log = log.log;

Vue.prototype.log = log;
Copy the code

Environment configuration

In the beginning, I wrote the environment-related configuration in the.ejs file, but later I felt uncomfortable and added the trouble to change the environment. Env file is modeled after vue –mode. When starting with the command, I wrote the way of –mode followed by the parameter.

In webpack. The renderer. Config. Js (because the client package will go here) webpack HtmlWebpackPlugin

let argv = process.argv.slice(2); if(argv[0] == '--mode' && argv[1]){ dotenv.config({path:path.join(__dirname, `.. /.env.${argv[1]}`)}) } else{ dotenv.config({path:path.join(__dirname, `.. /.env.dev`)}) }Copy the code

Dotenv is used to inject environment variables, in fact, we can read the. Env file to get parameters, but because I am lazy to directly use dotenv and the proxy can use [dog head], and finally in HtmlWebpackPlugin template to write variables to the. Ejs file to recommend passing strings. Parse (), for example: let env = json.parse (‘<%= htmlwebpackplugin.env %>’).

Since there is no proxy after packaging, the requested URL will be missing the domain name (I wrote it this way), so I do an operation in the Axios interceptor.

This is one area that the record lords feel is lacking