一、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 definedERROR 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报错解决方法