Chapter 11: Electron-Vue Create Project

• First you need to install vue-cli scaffolding

npm install -g vue-cli

• 1

For detailed steps, please see: vue learning (5)-vue-cli builds the vue project directory structure

• Install Electron globally

npm install -g electron

• 1

For details, please see: Chapter 1: Electron environment setup

• Electron-Vue create project

vue init simulatedgreg/electron-vue my-project

• 1

• Install dependencies and run your program

cnpm install

• 1

• Run (npm run dev)
  

---

Note that if the node version is greater than 12

• Run error

• Solution (modify webpack.renderer.config.js and webpack.web.config.js in the .electron-vue directory)

1、webpack.web.config.js

Before

modification: After modification:

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),
    new webpack.DefinePlugin({
      'process.env.IS_WEB': 'true'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

2、webpack.renderer.config.js

before fixing:

After modification:

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

• Run result (npm run dev)

---

Let the vscode code prompt

当前项目下
cnpm install electron --save

• 1
• 2
• 3

Use js-cookie

cnpm i js-cookie

• 1

---

Bale

npm run build

• 1

• Question 1: Error: Unresolved node modules: vue, highcharts,***

解决方案
删除node_modules
使用 npm install (不是使用cnpm会出问题)

• 1
• 2
• 3

• Problem two: electron packaging has been downloading

在 文件夹跟目录下新建文件 .npmrc，内容如下：
electron_mirror=http://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

• 1
• 2
• 3
• 4

Perform num run build again and the speed will be faster

• Project image resource error

Do not place image resources in assets, but in the static directory

path.join(__static,  'yuma.png')

• 1
• 2

• The icon in the upper left corner is not displayed

这是build/icons/icon.ico制作的问题，可以选择IconWorkshop软件来制作

• 1

• Default system name in the upper left corner

在主进程中设置

//设置系统名称（也是初始化左上角名称——项目名称在index.ejs中修改）
app.setName("舆情监控系统")

• 1
• 2
• 3
• 4
• 5

• White screen at startup

在主进程中

mainWindow = new BrowserWindow({
    height: 800,
    useContentSize: true,
    width: 1200,
    show: false //先隐藏
  })

  mainWindow.loadURL(winURL)

  mainWindow.on('ready-to-show', () => {
    mainWindow.show() //初始化后再显示
    
    //右键菜单
    require('./model/menu')
    //系统托盘
    require('./model/tray')
  })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

Note that require should be placed after mainWindow.show() when it is introduced, otherwise an error will be reported

• Click the desktop icon to open only one application

在主进程中底部直接添加

const shouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => {
  // Someone tried to run a second instance, we should focus our window.
  if (mainWindow) {
    if (mainWindow.isMinimized()) mainWindow.restore()
    mainWindow.focus()
    mainWindow.show()
  }
})

if (shouldQuit) {
  app.quit()
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

• Install electron-squirrel-startup

npm i electron-squirrel-startup --save
不能使用npm打包会报错

在主进程的最上面添加
if (require('electron-squirrel-startup')) {
  app.quit();
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• nsis configuration

"nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "allowElevation": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7

'nsis': {
    // 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）
    'oneClick': false,
    // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
    'allowElevation': true,
    // 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
    'allowToChangeInstallationDirectory': true,
    // 安装图标
    'installerIcon': 'build/installerIcon_120.ico',
    // 卸载图标
    'uninstallerIcon': 'build/uninstallerIcon_120.ico',
    // 安装时头部图标
    'installerHeaderIcon': 'build/installerHeaderIcon_120.ico',
    // 创建桌面图标
    'createDesktopShortcut': true,
    // 创建开始菜单图标
    'createStartMenuShortcut': true,
    // electron中LICENSE.txt所需要的格式，并非是GBK，或者UTF-8，LICENSE.txt写好之后，需要进行转化，转化为ANSI
    'license': 'LICENSE.txt'
  },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

• mac 打包错误Can not locate Mac Memory.pm in @INC you may need to install the Mac:Memor

是因为electron-builder版本和当前的mac系统版本不匹配导致,
我这里electron-builder版本是20.44.4——>升级为22.7.0


卸载 electron-builder
npm uninstall electron-builder

安装 electron-builder指定版本
npm install [email protected] --save-dev

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

执行npm run build 成功打包

• 1

Note that mac does not need a tray, on('close', will report an error, so generally mac will directly remove the tray function

Otherwise, an error will be reported:

• Small case contact demo

Public opinion system link: https://pan.baidu.com/s/1_OS_cvY5HYhQfeWGzZiUmw Password: qp1f