Electron（4）electron-vue

序言

vue init simulatedgreg/electron-vue electron-vue

Command vue init requires a global addon to be installed.

Please run yarn global add @vue/cli-init and try again.

npm run dev

报错：Webpack ReferenceError: process is not defined

解决方案：

修改 .electron-vue/webpack.renderer.config.js 和 webpack.web.config.js如下：

webpack.web.config.js

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

webpack.render.config.js

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

npm start

安装element-ui

npm i element-ui -S

在 /my-project/src/renderer/main.js 中引入 element ui

// element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

此时就可以在任意 .vue 文件中添加和使用 element-ui 元素了。

Electron生成exe安装包并且可以自动更新

yarn add electron-builder --dev

npm install electron-updater --save

 

electron-builder打包发布

https://www.electron.build/

https://www.electron.build/auto-update

 

打包完成白屏问题解决

npm run pack:main

npm run pack:renderer

npm run build

 

 

electron打包可选择安装位置，可自动更新

electron-builder和electron-packager功能对比

https://www.electron.build/configuration/configuration

NSIS打包electron程序为exe安装包

https://www.cnblogs.com/luzhanshi/p/11046260.html

 

我们打包好的应用最后是要发给客户使用，那么，怎么把我们的electron应用整合成一个安装包呢？

可以使用下面两种方法：

1. NSIS打包Electron: http://blog.csdn.net/yu17310133443/article/details/79496499

2. grunt打包Electron: http://blog.csdn.net/yu17310133443/article/details/79495936

 

 

nsis配置

这个要详细的讲一下，这个nsis的配置指的是安装过程的配置，其实还是很重要的，如果不配置nsis那么应用程序就会自动的安装在C盘。没有用户选择的余地，这样肯定是不行的

关于nsis的配置是在build中nsis这个选项中进行配置，下面是部分nsis配置

https://blog.csdn.net/weixin_34162695/article/details/91461372

 

https://blog.csdn.net/z858466/article/details/108191797?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-10&spm=1001.2101.3001.4242

lectron-builder中，默认是使用nsis这个脚本来生成最终的安装包的。表面上来看，生成的安装包是非常令人不爽的。因为，太过于简陋了。特别是不给自定义安装目录的机会这事儿，颇受诟病。那么大家可以想想看，electron-builder是基于nsis。nsis不能自定义安装目录么？并不是。所以，问题的解决方案就是：自定义electron-builder的nsis设置项目。 

自动更新

electron-vue+electron-updater实现自动更新

三步搞定electron-vue软件自动更新

 

https://github.com/electron-userland/electron-builder

 

使用 electron-builder 及 electron-updater 给项目配置自动更新

 

而这个less是需要安装的，npm install --save-dev less-loader less

TypeError: this.getOptions is not a function

原因： less-loader安装的版本过高 解决方案：

1.npm uninstall less-loader

2.npm install less-loader@5.0.0

资料

Electron开发本地音乐播放器

https://github.com/SimulatedGREG/electron-vue

https://simulatedgreg.gitbooks.io/electron-vue/content/cn/