【Electron-vue】构建桌面应用（29）- macOS下改变窗口的大小_逆风飞翔的猿的博客

在前面的文章中说了关于 Electron-vue 开发客户端，已经支持 windows 和 linux 。现在需要支持 macOS ，由于 electron 是跨平台的，所以代码就直接拿过来用在 macOS 中，表现还是有所不一样的，比如托盘菜单，左右键表现形式等。今天讲到的就是在 macOS 下如何动态的设置窗口的大小。
这是之前在 windows 和 linux 下都支持的动态改变窗口的大小。
// 设置window窗口大小
function setWindowSize(width, height) {
  mainWindow.setSize(width, height)
  mainWindow.setMaximumSize(width, height)
  mainWindow.setMinimumSize(width, height)
但是在macOS下，却切换不过来，具体的说是有的情况下可以切换，有的情况下切换不了。从大到小可以切换，从小到大切换不了。也许还有其他的情况下切换不了…
 
 可以看出，真实页面加载出来的了，但是窗口的大小却没有改变，导致出现了滚动条。 
在网上搜了，没有找到对应的接二觉办法，于是就去了github上electron专区，找相关的问题。 
费了一番功夫还是找到了一个解决办法：戳这里
 其中有个网友提到了这种解决办法
  
意思就是：关于这个问题的变通方法是：在使用setSize之前，先使用setMinimumSize来设置宽高，于是修改了一下代码： 
// 设置window窗口大小
function setWindowSize(width, height) {
  mainWindow.setMaximumSize(width, height)
  mainWindow.setMinimumSize(width, height)
  mainWindow.setSize(width, height)
然后在macOS下从新执行一下，发现无论是从大到小还是从小到大的发生变化，都能成功的改变大小。
                    在前面的文章中说了关于Electron-vue开发客户端，已经支持windows和linux。现在需要支持macOS，由于electron是跨平台的，所以代码就直接拿过来用在macOS中，表现还是有所不一样的，比如托盘菜单，左右键表现形式等。今天讲到的就是在macOS下如何动态的设置窗口的大小。这是之前在windows和linux下都支持的动态改变窗口的大小。// 设置window窗口大小function setWindowSize(width, height) {  mainWindow.setS
				Mac OS下最大化窗口的工具，可自定义快捷键。很方便，自己多年来一直在用，兼容Yosemite。
打开时需要先开启Accessibility：
System Preferences->Security&Privacy->Privacy->Accessibility,然后将右边RightZoom勾选上就OK了。
Right Zoom的快捷键和具体使用方法，压缩包里的Guides有。
				electron-vue-admin项目在最开始就将跨域的配置完成了，但是与平常的vue项目以及electron-vue项目不同，electron-vue-admin项目的目录结构有所改变。
vue是在vue.config.js中配置proxyTable利用target获取远程接口地址，然后拦截、代理，从而解决冲突。electron-vue是通过在electron-vue文件夹下的dev-runner.js中做proxy的配置。
而electron-vue-admin则是通过config文件夹下的这三个文件
拖拽是能拖拽了，但是双击等事件无法触发
BrowserWindow中设置了resizable: false; （不允许调节大小），设置为flase将会使得窗体无法调节大小，当然也会是的可拖拽区域双击无法放大缩小窗体
win = new BrowserWindow({
    width: 1440,
    height: 81
				直接 会直接看到大小变化，放在普通场景算正常，但是如果类似从登录界面切换到主界面或者从主界面切换到登陆页面，这时候直接变化大小看起来很奇怪，最好需要做点处理过渡一下。1、初始化窗口的函数 
2、新建监听，用于设置窗口信息，延迟展示窗口
说明：关键代码在 ，先改成透明，然后设置大小、标题等等，然后执行最小化，最后延迟展示。注意代码顺序也会影响执行结果.........
				最近公司有个新产品线，需要将应用打包成客户端，提供私有化部署。考虑到Web线上已经实现大部分需求，技术选型使用Electron。本文不是帮助读者的扫盲文，只是记录下项目工程中遇到的坑，所以阅读本文需要web和electron知识。
应产品要求，私有化部署主要考虑windows端，mac端其次。框架选型使用electron-vue脚手架(这里也强烈推荐)，该脚手架包含Vue技术栈单页应用 + ele...
2.点击屏幕左上角苹果图标旁边的"终端"菜单，选择菜单：偏好设置...。
3.打开偏好设置界面，点击"描述文件"->"窗口"。
4.就会看到有个"窗口大小"的设置项，修改"列数"、"行数"，然后关闭设置界面即可。
				最近处理一个Electron应用，关闭窗口以后最小化到Dock，结果点击Dock后无响应，后来发现是因为没有处理点击Dock的事件，导致了点击无法复原。
可以看到官方的文档说明，该事件是macOS独有的事件，监听并且处理这个事件即可点击Dock上的应用图标来恢复应用窗口。
  //如果是首次启动，那么就创建主窗体
  if (mainWindow === null) {
    create...
				### 回答1：
electron-vue 是一个使用 Vue.js 开发跨平台桌面应用的框架，可以使用 electron-builder 工具将其打包成 exe 文件。
以下是将 electron-vue 项目打包成 exe 的基本步骤：
1. 安装 electron-builder
在 electron-vue 项目的根目录下执行以下命令：
npm install electron-builder --save-dev
2. 配置打包参数
在项目根目录下创建一个 electron-builder.json 文件，用于配置打包参数。可以参考 electron-builder 的文档进行配置，主要包括应用程序名称、版本号、图标等。
3. 执行打包命令
在项目根目录下执行以下命令进行打包：
npm run build:win
该命令会生成一个 dist 目录，其中包含打包后的应用程序和安装程序，可以在 Windows 上运行。
以上就是将 electron-vue 项目打包成 exe 的基本步骤，希望对你有帮助。   
### 回答2：
electron-vue 是基于 Vue.js 和 Electron 的开发框架，可以快速构建桌面应用程序。在开发完成后，开发者需要将其打包成 .exe 格式（Windows 可执行文件），以便部署和发布。
以下是将 electron-vue 项目打包成 .exe 文件的步骤：
1. 准备工作
首先要安装 electron-packager 包，这个包可以让我们快速打包 electron 应用程序。可以在终端中输入以下命令进行安装：
npm install electron-packager --save-dev
2. 修改 package.json 文件
在 package.json 文件中，需要添加以下代码：
"scripts": {
  "package": "electron-packager ./ --platform=win32 --arch=x64 --icon=./build/icons/icon.ico --out=./dist --ignore=dist --overwrite"
这个代码段是一个命令，运行它可以将项目打包成指定平台（这里是 win32，也就是 Windows）的可执行文件，以 .exe 格式输出到指定目录（这里是 dist 文件夹）。其中，--icon 表示程序图标，--ignore 是忽略打包的文件夹，--overwrite 表示覆盖已有的输出文件夹。
3. 执行打包命令
在终端中输入以下命令，即可开始打包：
npm run package
然后等待一段时间，打包成功之后会在 dist 目录下生成 .exe 文件。
4. 发布
最后将 .exe 文件上传到合适的平台（例如 GitHub Release），这样用户就可以下载并使用了。
注意事项：
- 在打包时需要注意修改 .ico 图标文件的路径，确保能正确找到。
- 若需要打包成其他平台的可执行文件，可以修改 --platform 和 --arch 参数。
- 打包时，如果报错了，可以在命令行加上 --verbose 参数，查看具体错误信息。   
### 回答3：
electron-vue是一个基于vue.js构建的 electron框架的项目，可以让开发者快速地构建跨操作系统的桌面应用程序，并且electron-vue项目也非常容易打包成exe可执行文件，便于在Windows平台上使用。
打包electron-vue项目成exe的方法:
首先要在命令行中进入项目根目录，
然后运行：
npm run build
yarn run build
这两个命令将会编译和打包electron-vue项目，生成一个dist目录。
在默认情况下，打包出的exe应用程序是没有图标的，如果需要添加图标，需要在build目录下找到win下的icon.ico文件，并替换成你自己的图标文件。
接下来，需要使用第三方的打包工具，如electron-builder，打包成exe文件，命令如下：
npm run dist 或 yarn run dist
执行完这个命令后，就会在dist目录下生成一个installer目录，里面包含着生成的exe文件和其他必要的文件。
理论上，exe应用程序已经可以在Windows平台上使用了。
electron-vue项目打包成exe并不是一件复杂的事情。只需进入项目根目录运行 npm run build 命令，然后使用第三方打包工具electron-builder打包，就可以生成一个可执行的exe文件了，这样就极大地方便了开发者在Windows平台上部署应用程序。
                    github_26990911: 
                    因为你的message是在js加载时就决定了，所以你只要包装成function即可，比如官方的例子：https://github.com/alibaba/react-intl-universal/blob/master/packages/react-intl-universal/examples/browser-example/core/util.ts#L4
这个是demo效果：https://fe-tool.com/react-intl-universal
                【Eelectron-vue】构建桌面应用（20）-electron的退出quit和exit
                    曾经的你d: 
                    https://blog.csdn.net/m0_52539553/article/details/127069490?spm=1001.2014.3001.5502