创建应用
1.在vue项目中运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器:
vue add electron-builder
2.启动开发服务器
yarn 或者npm
yarn electron:serve
npm run electron:serve
3.打包成应用程序
yarn或使用NPM:
yarn electron:build
npm run electron:build
打包可能遇到的问题
用 npm run electron:build 打包项目后,再次安装打开项目,发现首页空白,切换npm run electron:serve的时候问题消失,正常显示
解决方法
// 修改路由的模式
const router = new VueRouter({
// mode: 'history',
mode: process.env.IS_ELECTRON ? 'hash' : 'history',
base: process.env.BASE_URL,
routes
})
原因:Electron 只在 路由模式 为 hash 时,才可以正常运行。否则,就会无法找到匹配的路径,故而选择 path: * 对应的路由,如果没有 path: *就显示空白