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

分手后的思念是犯贱 2023-02-16 04:22 24阅读 0赞

# 一、Electron-vue 项目创建 #

## 1.1 创建项目 ##

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

![format_png][]

## 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打包见解][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"
        ]
      }
    },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70][]

# 四、 错误处理 #

## 4.1 npm run build 后一直在下载 ##

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

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

## ##

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy80OTcwNDk2LWRhMDdkNTViYThmOWZiYTQucG5n?x-oss-process=image/format,png
[electron-builder]: https://juejin.im/post/5bc53aade51d453df0447927
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200615163310500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[electron-vue build]: https://juejin.im/post/5d102497e51d4556be5b3a74