1、vue init simulatedgreg/electron-vue 项目名称 2、cd进入项目名称,安装依赖npm intsall
3、npm run dev启动项目 4、启动项目可能会报下面的错误 5、解决报错方法: 启动报错ReferenceError: process is not defined解决方法 找到.electron-vue/webpack.web.config.js 和.electron-vue/webpack.renderer.config.js中的HtmlWebpackPlugin,添加templateParameters:
templateParameters(compilation, assets, options) { return { compilation: compilation, webpack: compilation.getStats().toJson(), webpackConfig: compilation.options, htmlWebpackPlugin: { files: assets, options: options }, process, }; },添加位置如下:
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() ],6、再次启动项目,启动成功 出现上述electron应用界面说明electron-vue搭建成功。
7、使用npm run build进行打包
8、打包结束后在build文件夹下面就会出现打包后的桌面应用.exe文件,点击即可下载安装在电脑桌面上 9、点击.exe文件进行点击安装