C:\Users\ Milyyy \AppData\Roaming\ NPM -cache\_logs\ 2018-11-27t07_36_17_406z-debug. Roaming\ NPM -cache\_logs\ 2018-11-27t07_36_17_406z-debug. Error encountered in electron packing VUE project resolved

For this article source please go to my GitHub address: easy to use the electron packing Vue

Stepped through countless pits, encountered a lot of problems. Finally, a feasible solution has been achieved. The basic steps are as follows:

1. First, clone a demo from Electron and select the disk you want to store the project on. (can not create a folder, see personal) directly run CMD;

Note that NPM dependencies are preferred here

The difference between NPM and CNPM: The difference between NPM and CNPM may be familiar, but it is easy to overlook, CNPM installed with various node_modules, this approach all packages are flat installation. All of a sudden node_modules expands with a lot of files. The packaging process is very slow. However, if node_modules is installed using NPM, all packages are in a tree structure, with a deeper hierarchy. Because of this difference, for some applications with large projects, it is easy to have the problem of slow packaging process and node memory overflow. Therefore, it is recommended that you use the CNPM installation dependency package to delete and replace it with the NPM installation dependency package before packaging.Copy the code
Git clone https://github.com/electron/electron-quick-start CD electron - quick - start CNPM install / / NPM, CNPM can, The CNPM speed is higher than that of NPM startCopy the code

After the project is running, the electron desktop screen will appear and clone the project entry files main.js and package.json. Next modify the path and configuration.

//----main.js---- function createWindow () { // and load the index.html of the app. mainWindow.loadURL(`file://${__dirname}/.. /dist/index.html ') // Modify hereCopy the code
//package.json {"name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "Electron. Js ", //-- "scripts": {"start":" Electron."}Copy the code

2. Next, in the created VUe-CLI project, install the electron dependency and run the following command:

npm install electron --save-dev

npm install electron-packager --save-devCopy the code

Now copy the clone project main.js to the build folder in the newly created project, rename it electron. Js, and change the assetsPublicPth for production mode (build) in config/index.js

build: { // Paths assetsRoot: path.resolve(__dirname, '.. Dist '), assetsSubDirectory: 'static', assetsPublicPath: './', //Copy the code

3. Add a directive to the package.json file of the new project as follows:

"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "jest --config test/unit/jest.conf.js --coverage", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "build": "node build/build.js", "electron_dev": "NPM run build && electron build/electron. Js" // Added commandCopy the code

Then execute:

NPM run build // Generates the dist directory (containing static resource files) NPM run electron_dev // starts electronCopy the code

Now that the desktop application generation is almost complete, there is only one final step left: package!

First, copy the electron. Js file from the build directory into the dist directory. Note that the key step is to format the loadURL path after copying it.

Like this:

function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({ }) // and load the index.html Of the app.mainwindow.loadurl (' ${__dirname}/index.html ') //-- modified --Copy the code

Next, copy the Package. json of the Clone example into the dist directory of the new project. In package.json of the project (note not package.json under dist), add a startup command for the electron packager downloaded earlier.

"build": "node build/build.js", "electron_dev": "npm run build && electron build/electron.js", "electron_build": /dist/ --platform=win32 --arch=ia32 --icon=./ SRC /assets/yizhu.ico --overwrite" //-- added command --Copy the code

Then, if you want to replace the app icon, go to assets in the SCR folder of your project and put the icon of the exe you want to set in. Ico format.

The name of your ico icon will be changed to yizhu. Ico is the name of my ico icon. (This is important!)

Here I want to emphasize a point, some students to run here error, it is likely that your picture path has not changed. Another point is that you forced your image to ico format, which is not allowed. Be sure to use native ICO-format ICONS. See what the ICO icon looks like in my screenshot at the bottom. Here I have attached a link to convert to ICO format. Simple to operate.

Finally, run

NPM run build // Refresh the static resource file NPM run electron_build // startCopy the code

This time has generated apS-win32-ia32 folder, find inside helloWorld.exe file can be run. Of course, I’m not renaming the file here, but you can name it yourself.

At this point, the EXE file is finalized.

My file directory is attached below:

 

Operate several times, see more error code. Take a closer look at what it says.

 

 

  • Thumb up 3
  • collection
  • share
    • The article reported


milysong
Direct messages
Focus on