electron+vue框架搭建桌面应用-蒲公英云

electron+vue框架搭建桌面应用

electron+vue相关文档：

https://github.com/SimulatedGREG/electron-vue
electron+vue官方文档：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

一、electron+vue是什么

electron+vue 是一个结合 vue-cli 与 electron 的项目，主要避免了使用 vue 手动建立起 electron 应用程序，该程序包含了 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如vue-router、vuex 等等的脚手架。

二、electron+vue搭建

在构建之前，请确保自己环境是否已配置好，若没有配置，请自行配置相关环境。

可以使用yarn安装或npm安装electron+vue。yarn安装会比npm快。

若没安装yarn，请安装yarn（yarn）：https://yarnpkg.com/zh-Hans/docs/install#windows-stable

window小伙伴在安装electron+vue时会报错，所以，在安装之前，请先安装相关windows-build-tools。

这里注意安装windows-build-tools时，一定要以管理身份打开cmd命令提示符,然后输入以下yarn global add windows-build-tools或npm install —global windows-build-tools

这样才能安装成功。若不以管理身份打开cmd命令提示符安装会出现如下图错误：

1.windows-build-tools可以使用以下两种npm或yarn方式安装

npm的安装命令
npm install --global windows-build-tools

yarn安装命令
yarn global add windows-build-tools
yarn安装结果如下：

2.建立一个名为my-project的electron+vue项目
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

3.安装依赖并运行你的程序
进入改文件目录
cd my-project
安装相关依赖
yarn # 或者 npm install
运行项目
yarn run dev # 或者 npm run dev

输入yarn run dev运行

4.界面图：

代码文件目录官网介绍：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/file-tree.html

将项目打包,这个打包过程可能需要安装其他东西，所以等待时间会很长，我就打包了差不多近1小时

yarn run dev

electron-vue报错Webpack ReferenceError:process is not defined

在使用electron-vue时，运行npm run dev出现如下错误
在这里插入图片描述

解决方式：
找到.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中的HtmlWebpackPlugin，添加templateParameters，修改后如下：

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({filename: 'styles.css'}),
    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
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],