【electron-vue】 一、elecron-vue 环境搭建

一、Electron-vue 项目创建

1.1 创建项目

# 安装脚手架
npm install -g vue-cli

# 安装脚手架样板项目
vue init simulatedgreg/electron-vue elec-demo01

 

1.2 Webpack ReferenceError:process is not defined 错误处理

在执行 npm install 命令时，可能会报错，需要修改 webpack 配置文件

错误内容：

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

解决方案：

修改.electron-vue/webpack.web.config.js和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin，添加templateParameters，修改后如下：

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
}),

 

二、Electron-vue 结合 electron-edge 调用 c# 代码

 

 

三、使用 electron-builder 打包

转载：electron-builder打包见解

3.1 window 平台打包命令

npm run build --win

由于使用 x86 的包可以同时满足 32 位系统和 64 位系统，故直接打包出 x86 的安装包

使用过程中发现用命令指定无效，需要修改 package.json 文件：

"win": {
  "icon": "build/icons/icon.ico",
  "target": {
    "target": "nsis",
    "arch": [ 
      "ia32"
    ]
  }
},

  

 

四、 错误处理

4.1 npm run build 后一直在下载

解决方式：使用其他工具下载后，放到 electron-builder 的 cache 目录下

转载： 国内electron-vue build报错解决方法