Windows10下Electron+Vue透明无框窗口标题移除方法咨询

开发者阿泽

2026-5-20

嘿，这个问题我之前在做Electron+Vue透明窗口的时候也踩过坑！明明删了HTML里的标题，失去焦点还是蹦出默认的“Electron”，其实是Electron有好几处会偷偷设置窗口标题的地方，得把它们都堵住才行。给你整理了几个关键步骤：

调整Electron主进程的窗口配置
找到主进程文件（一般是src/background.js），在创建BrowserWindow的配置里，明确把title设为空字符串，同时确保你已经开启了frame: false（透明窗口必备），还可以加上titleBarStyle: 'hidden'来强化隐藏标题栏的行为。示例代码：
```
mainWindow = new BrowserWindow({
  transparent: true,
  frame: false,
  title: '', // 强制清空标题
  titleBarStyle: 'hidden',
  webPreferences: {
    // 你的现有配置，比如nodeIntegration、contextIsolation等
  }
})
```
要是还是不放心，还可以在窗口准备好显示的时候再手动重置一次标题：
```
mainWindow.on('ready-to-show', () => {
  mainWindow.setTitle('');
  mainWindow.show();
})
```
彻底清空HTML模板的标题标签
打开你的public/index.ejs模板文件，别只删<title>里的内容，直接写成<title></title>空标签——不然Electron会自动给你填充默认的“Electron”标题。
在渲染进程里强制重置标题
有时候页面加载完成后，Vue或者Electron的内部逻辑可能会偷偷重置标题，所以在App.vue的mounted钩子中手动设置document.title为空：
```
export default {
  mounted() {
    document.title = '';
  }
}
```
检查vue-cli-electron-builder的全局配置
打开vue.config.js，如果里面配置了pluginOptions.electronBuilder.productName，把它改成空字符串——这个配置值会被Electron用作窗口的默认标题，留着的话就算前面都设了空，它还是会冒出来：
```
module.exports = {
  // 其他项目配置
  pluginOptions: {
    electronBuilder: {
      productName: '', // 清空这个配置项
      // 你的其他Electron构建配置
    }
  }
}
```