使用Vue.js+Electron打包遇问题：插件安装后报错及Devtools警告求助

架构老林

2026-5-14

Hey there! Let's work through the issues you're hitting when setting up Vue.js with Electron using vue-cli-plugin-electron-builder:

Fixing the Devtools Warnings

The two warnings you're seeing:

WARN Devtools extensions are broken in Electron 6.0.0 and greater
WARN Vue Devtools have been disabled, see the comments in your background file for more info

This is a known compatibility quirk—Electron versions 6.0.0 and above changed how they handle Chrome Devtools extensions, which breaks Vue Devtools integration out of the box. The plugin automatically disables Vue Devtools to avoid runtime errors, but here's what you can do based on your needs:

If you don't need Vue Devtools right now: You can safely ignore these warnings; your app will run perfectly fine without them.
If you need Devtools for debugging:
1. Open your project's background.js (or background.ts if using TypeScript) file.
2. Look for the commented section that references enabling Vue Devtools. It’ll have instructions to uncomment a block of code that uses session.defaultSession.loadExtension() to load the Devtools manually.
3. Note that this workaround might not be 100% reliable on newer Electron versions. If you hit snags, you could temporarily downgrade Electron to 5.x (though this isn’t ideal for long-term support).

Fixing the 'setServers' Unused Variable Error

The error error: 'setServers' is defined but never used (no-unused-vars) at src/App.vue:232:10 is an ESLint rule violation. You’ve got three straightforward fixes:

Delete the unused function: If you don’t need setServers at all, just remove that code from line 232 of src/App.vue.
Ignore the rule for that line: Add a comment directly above the function definition to skip the ESLint check:
```
// eslint-disable-next-line no-unused-vars
function setServers() {
  // your existing code here
}
```
Tweak your ESLint config: If you frequently have unused variables during development, adjust your .eslintrc.js file to turn this into a warning instead of an error:
```
rules: {
  'no-unused-vars': 'warn'
}
```
This way, it won’t block your build process.