vue已成型项目如何使用electron

已经创建完成的vue项目中首先要安装electron

1.在vue根目录下执行 vue add electron-builder

当项目中运行vue add electron-builder没有反应时 是因为vue-cli版本问题导致所以需要卸载当前的vue-cli在重新安装即可。执行以下命令

npm uninstall -g @vue/cli 卸载vue-cli

npm install -g @vue/cli 重新安装vue-cli

然后再一次执行vue add electron-builder等待安装，安装的过程中会让选择版本，我这里选择的是最新的版本

安装成功之后可以看到package.json中已经有了相应electron的配置，在src/background.js 会有background.js这个文件。js文件中就有electron的基础配置比如说打开的width/height

有需要的可以根据自己的需要进行配置 

2.当electron安装完成之后这个时候就需要进行项目运行了 执行npm run electrin:serve

如下为运行和打包的命令，执行之后项目可正常启动运行

 3.最后就是进行打包，执行npm run electron:build

打包的时候如果碰到这种报错

• building target=nsis file=packersZhaizhishe-setup-0.0.1.exe archs=x64, ia32 oneClick=true
Error: C:UsersAdministratorAppDataLocalelectron-buildercachensisnsis-3.0.3.0Binmakensis.exe exited with code 1
Output:
Command line defined: "APP_ID=org.lzj.demo1"
Command line defined: "APP_GUID=bd0576c0-c762-56de-9d81-9c215af5daac"
Command line defined: "PRODUCT_NAME=Zhaizhishe"
Command line defined: "PRODUCT_FILENAME=Zhaizhishe"
Command line defined: "APP_FILENAME=Zhaizhishe"
Command line defined: "APP_DESCRIPTION=��һ���汾"
Command line defined: "VERSION=0.0.1"
Command line defined: "PROJECT_DIR=F:workspaceͰװˮ��Ŀtrunkcodefront_endpcmerch-endelectron-app"
Command line defined: "BUILD_RESOURCES_DIR=F:workspaceͰװˮ��Ŀtrunkcodefront_endpcmerch-endelectron-appbuild"
Command line defined: "APP_32=F:workspaceͰװˮ��Ŀtrunkcodefront_endpcmerch-endelectron-apppackersapplication-name-0.0.1-ia32.nsis.7z"
Command line defined: "APP_32_NAME=application-name-0.0.1-ia32.nsis.7z"
Command line defined: "APP_32_HASH=DE5EBADF1D45684C6E356B6CB89B7AD316D38F9F0BC0D832D8BE6EB1548F6E05C3210FC141EDCC720C6E9DF5899497DAD622233187F3787DF523AF35FD6B975B"
Command line defined: "APP_64=F:workspaceͰװˮ��Ŀtrunkcodefront_endpcmerch-endelectron-apppackersapplication-name-0.0.1-x64.nsis.7z"
Command line defined: "APP_64_NAME=application-name-0.0.1-x64.nsis.7z"
Command line defined: "APP_64_HASH=0DC7A70B7392CABFEFAB78AFFA0BC7C0768B7E42F0B261AECB838893968F01DD7F173D4B866F65EB41D4B1094745FA089BF1F09D33A154370F881F55C573C9BE"
Command line defined: "COMPANY_NAME=lzj"
Command line defined: "APP_INSTALLER_STORE_FILE=Zhaizhisheinstaller.exe"
Command line defined: "COMPRESSION_METHOD=7z"
Command line defined: "ONE_CLICK"
Command line defined: "RUN_AFTER_FINISH"
Command line defined: "INSTALL_MODE_PER_ALL_USERS"
Command line defined: "INSTALL_MODE_PER_ALL_USERS_REQUIRED"
Command line defined: "SHORTCUT_NAME=Zhaizhishe"
Command line defined: "UNINSTALL_DISPLAY_NAME=Zhaizhishe 0.0.1"
Command line defined: "COMPRESS=auto"
Command line defined: "BUILD_UNINSTALLER"
Command line defined: "UNINSTALLER_OUT_FILE=F:workspaceͰװˮ��Ŀtrunkcodefront_endpcmerch-endelectron-apppackers.__uninstaller-nsis-application-name.exe"
Processing config: C:UsersAdministratorAppDataLocalelectron-buildercachensisnsis-3.0.3.0nsisconf.nsh
Processing script file: "<stdin>" (ACP)

Error output:
!include: could not find: "F:workspace桶装水项目trunkcodefront_endpcmerch-endelectron-appnode_moduleselectron-builder-libtemplatesnsisincludeStdUtils.nsh"
Error in script "<stdin>" on line 1 -- aborting creation process

可能是因为electron项目路径中不能有中文，更改以下项目路径为英文即可。

打包的时候可能会碰到运行npm run electron:build一直失败这时候需要下载以下electron的资源包

资源包下载

下载成功之后将压缩包中的文件放到C:\Users\Default\AppData\Local路径下 然后在运行

npm run electron:build就可以进行打包了，打包出来的exe如下运行就可以啦