当前位置: 代码迷 >> 综合 >> 【electron-vue】 一、elecron-vue 环境搭建
  详细解决方案

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

热度:14   发布时间:2023-09-21 00:24:44.0

一、Electron-vue 项目创建

1.1 创建项目

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

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

 

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"]}
},

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

 

四、 错误处理

4.1 npm run build 后一直在下载

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

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