创建项目

DEMO

1
vue init simulatedgreg/electron-vue test

配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
➜ WebstormProjects $ vue init simulatedgreg/electron-vue test

? Application Name test
? Application Id com.example.yourapp
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? No
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selectio
n)axios, vue-electron, vue-router, vuex, vuex-electron
? Use linting with ESLint? No
? Set up unit testing with Karma + Mocha? No
? Set up end-to-end testing with Spectron + Mocha? No
? What build tool would you like to use? builder
? author 连浩丞 <RhythmLian@outlook.com>

正常运行

1
npm run dev

初次运行时错误

npm run dev

错误信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ERROR in Template execution failed: ReferenceError: process is not defined

ERROR in   ReferenceError: process is not defined
  
  - index.ejs:11 eval
    [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:11:2
  
  - index.ejs:16 module.exports
    [.]/[html-webpack-plugin]/lib/loader.js!./src/index.ejs:16:3
  
  - index.js:284 
    [test]/[html-webpack-plugin]/index.js:284:18
  
  - runMicrotasks
  
  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5

解决方案

修改.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中的plugins > HtmlWebpackPlugin为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
}),

npm run build

错误信息

1
2
3
4
5
6
Error: Exit code: 2. Command failed: /usr/bin/perl /private/var/folders/26/qgv4hgzj1pl_9bv96jqn476r0000gn/T/t-ciIudV/1-dmgProperties.pl
Can't locate Mac/Memory.pm in @INC (you may need to install the Mac::Memory module) (@INC contains: /Library/Perl/5.18/darwin-thread-multi-2level /Library/Perl/5.18 /Network/Library/Perl/5.18/darwin-thread-multi-2level /Network/Library/Perl/5.18 /Library/Perl/Updates/5.18.4 /System/Library/Perl/5.18/darwin-thread-multi-2level /System/Library/Perl/5.18 /System/Library/Perl/Extras/5.18/darwin-thread-multi-2level /System/Library/Perl/Extras/5.18 .) at /private/var/folders/26/qgv4hgzj1pl_9bv96jqn476r0000gn/T/t-ciIudV/1-dmgProperties.pl line 4.
BEGIN failed--compilation aborted at /private/var/folders/26/qgv4hgzj1pl_9bv96jqn476r0000gn/T/t-ciIudV/1-dmgProperties.pl line 4.

Can't locate Mac/Memory.pm in @INC (you may need to install the Mac::Memory module) (@INC contains: /Library/Perl/5.18/darwin-thread-multi-2level /Library/Perl/5.18 /Network/Library/Perl/5.18/darwin-thread-multi-2level /Network/Library/Perl/5.18 /Library/Perl/Updates/5.18.4 /System/Library/Perl/5.18/darwin-thread-multi-2level /System/Library/Perl/5.18 /System/Library/Perl/Extras/5.18/darwin-thread-multi-2level /System/Library/Perl/Extras/5.18 .) at /private/var/folders/26/qgv4hgzj1pl_9bv96jqn476r0000gn/T/t-ciIudV/1-dmgProperties.pl line 4.
BEGIN failed--compilation aborted at /private/var/folders/26/qgv4hgzj1pl_9bv96jqn476r0000gn/T/t-ciIudV/1-dmgProperties.pl line 4.

解决方案

1
sudo npm i electron-builder@latest -S
  • 将electron-builder更新到最新版本

相关方法

向后台发送JSON数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import request from 'request-promise'

export default {
  methods: {
    submit(){
      request({
        uri: api,
        method: 'POST',
        headers:{
          'User-Agent': 'Request-Promise'
        },
        json: fm // json表单
      }).then(res => {
        if(res.status){
          this.$message({
            message: "Register Success!",
            type: 'success'
          });
        } else this.$message.error("Register Failed! With message: " + res.msg);
      })
    }
  }
}

问题与修复

错误信息：TypeError: handler.call is not a function

解决方案

*.vue中，mounted: {} 改为 mount(){}

错误信息：Element-ui不显示Table

解决方案

将.electron-vue/webpack.renderer.config.js中whiteListedModules修改为：

1
let whiteListedModules = ['vue', 'element-ui']