electron+vue框架搭建桌面应用

逃离我推掉我的手 2021-09-29 15:24 790阅读 0赞

electron+vue相关文档：

[https://github.com/SimulatedGREG/electron-vue][https_github.com_SimulatedGREG_electron-vue]  
electron+vue官方文档：[https://simulatedgreg.gitbooks.io/electron-vue/content/cn/][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][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命令提示符安装会出现如下图错误：

![image.png][]

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

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

yarn安装命令  
`yarn global add windows-build-tools`  
yarn安装结果如下：  
![image.png][image.png 1]

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

![image.png][image.png 2]

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

![image.png][image.png 3]

输入`yarn run dev`运行  
![image.png][image.png 4]

4.界面图：

![image.png][image.png 5]

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

![image.png][image.png 6]

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

yarn run dev

![image.png][image.png 7]

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

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

解决方式：  
找到.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()
      ],

参考：  
[https://blog.csdn.net/Gabriel\_wei/article/details/92785089][https_blog.csdn.net_Gabriel_wei_article_details_92785089]

[https://github.com/SimulatedGREG/electron-vue/issues/871][https_github.com_SimulatedGREG_electron-vue_issues_871]

[https_github.com_SimulatedGREG_electron-vue]: https://github.com/SimulatedGREG/electron-vue
[https_simulatedgreg.gitbooks.io_electron-vue_content_cn]: https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
[https_yarnpkg.com_zh-Hans_docs_install_windows-stable]: https://yarnpkg.com/zh-Hans/docs/install#windows-stable
[image.png]: /images/20210724/85458d645efa4488a62a8914c453f24a.png
[image.png 1]: /images/20210724/6303c719c0824d1cbdc1b5ec17d4105e.png
[image.png 2]: /images/20210724/38f753493cea42579abc21322cf8f945.png
[image.png 3]: /images/20210724/e2bc2e9d82e140edba7308a552478313.png
[image.png 4]: /images/20210724/01333378190a453fb70faefeed50d377.png
[image.png 5]: /images/20210724/da532358a20343fa8b077c757f95eb4d.png
[https_simulatedgreg.gitbooks.io_electron-vue_content_cn_file-tree.html]: https://simulatedgreg.gitbooks.io/electron-vue/content/cn/file-tree.html
[image.png 6]: /images/20210724/959b586bbbc64cdfb3180595077b7df3.png
[image.png 7]: /images/20210724/8e44f083124e42768f965b22d060f815.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VlXzExZWVlZWVl_size_16_color_FFFFFF_t_70]: /images/20210724/fdbc4da276864a7693ca64510d4a0f91.png
[https_blog.csdn.net_Gabriel_wei_article_details_92785089]: https://blog.csdn.net/Gabriel_wei/article/details/92785089
[https_github.com_SimulatedGREG_electron-vue_issues_871]: https://github.com/SimulatedGREG/electron-vue/issues/871