Electron-vue 打包踩坑

一、`electron-vue` 集成`fluent-ffmpeg`之后，`dev`模式正常，打包之后报`ffmpeg`的相关方法找不到的错误。比如：

can not find ffprob
一开始是一脸懵B，卡了差不多两天，网上的解决办法大多是设置"asar": false,试了之后无解，后来google之后在fluent-ffmpeg官网找到解决办法，在使用ffmpeg时要设置对应的path

官网清楚的说明了必须设置ffmpeg的二进制文件才可以打包,究其原因还是自己没在一开始就查官方文档。

image.png

进行下面的设置：

ffmpeg.setFfmpegPath("/usr/local/bin/ffmpeg");

设置之后解决上面错误。

参考：

仔细研究：https://autoedit.gitbook.io/documentation/appendix/ffmpeg-and-ffprobe-in-electron

张剑大佬-https://www.psvmc.cn/article/2019-03-14-electron-package.html

FFmpegGUI项目参考

https://newsn.net/say/electron-vue-build-command.html

https://vxhly.github.io/views/electron/learn-electron-vue.html#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88-7

https://newsn.net/say/electron-packager-extra-resource.html

https://github.com/ffmpegwasm/ffmpeg.wasm

二、一般的高版本的 node, 大于12的版本时候。初步运行 electron-vue 项目时候会报错！

新建项目并运行：

npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
cd my-project
npm install
npm run dev

报下面错误：

ERROR in Template execution failed: ReferenceError: process is not defined
ERROR in   ReferenceError: process is not defined
index.ejs:102
/Users/codeman/github/my-project/src/index.ejs:102:2
index.ejs:107 module.exports
/Users/codeman/github/my-project/src/index.ejs:107:3
index.js:284
[my-project]/[html-webpack-plugin]/index.js:284:18

问题：

npm run dev的时候会提示process is not defined。

解决办法是：

在.electron-vue/webpack.renderer.config.js和.electron-vue/webpack.web.config.js文件中找到HtmlWebpackPlugin代码段并更改为如下代码：

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

https://www.wubo.net.cn/development/electron_vue_init_fix.html
https://segmentfault.com/a/1190000019487488

三、在初步使用 electron-builder 编译 electron-vue 项目时候会报错（PS：一般出现在 MacOS 下）

Error: Exit code: 2. Command failed: /usr/bin/perl /private/var/folders/mj/n34f_bp95zq2_1fwll3bq70m0000gn/T/t-51hskU/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/mj/n34f_bp95zq2_1fwll3bq70m0000gn/T/t-51hskU/1-dmgProperties.pl line 4.
BEGIN failed--compilation aborted at /private/var/folders/mj/n34f_bp95zq2_1fwll3bq70m0000gn/T/t-51hskU/1-dmgProperties.pl line 4.

解决办法：

升级你的 electron-builder 依赖包

npm install electron-builder@latest -D

https://vxhly.github.io/views/electron/learn-electron-vue.html#%E5%9D%91%E4%B8%80

最后编辑于：2020.05.20 17:55:28