Electron-Bootstrap-Vue Toast无法显示，报$attrs/$listeners只读错误求助

Hey there, let's work through this issue together! The $attrs/$listeners readonly warnings along with non-functional Toast are super common when combining Electron-Vue with Bootstrap-Vue, and they almost always boil down to duplicate Vue instances or misconfigured Webpack aliases in the Electron-Vue setup. Here's how to fix it:

Why This Happens #

Electron-Vue splits your app into a main process and a renderer process. If Vue is being loaded multiple times (once in each process, or via conflicting dependencies) or the wrong Vue build is used, libraries like PortalVue (which Bootstrap-Vue relies on for Toast) can't share a single Vue instance—leading to those readonly attribute warnings and broken functionality.

Step-by-Step Solutions #

1. Fix the Webpack Alias in the Correct Configuration File #

You mentioned updating the Webpack alias, but Electron-Vue uses separate configs for main and renderer processes. You need to modify the renderer process config (not the main process or a root-level webpack file):

• Navigate to .electron-vue/webpack.renderer.config.js
• Find the resolve.alias section and update it to use the full Vue build (required for Bootstrap-Vue's template rendering):

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js', // Use full build (runtime + compiler)
      '@': path.resolve(__dirname, '../src/renderer')
    },
    extensions: ['.js', '.vue', '.json', '.css']
  }
  

2. Ensure Only One Version of Vue is Installed #

Duplicate Vue installations are a frequent culprit. Run this command to check for multiple Vue versions:

npm ls vue

If you see multiple entries:

• Delete your node_modules folder and package-lock.json
• Reinstall dependencies with npm install

3. Verify Your Dependency Import Order #

Make sure you import Vue before Bootstrap-Vue and PortalVue in your src/renderer/main.js:

// First import Vue
import Vue from 'vue'

// Then add Bootstrap-Vue and PortalVue
import BootstrapVue from 'bootstrap-vue'
import PortalVue from 'portal-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Initialize the plugins
Vue.use(BootstrapVue)
Vue.use(PortalVue)

4. Clear Build Cache and Rebuild #

Electron-Vue caches build artifacts, so old configs might still be in use. Run these commands to clean and rebuild:

npm run clean
npm run dev

5. Double-Check Your Toast Call Syntax #

Make sure you're calling the Toast from within a Vue component's context (using this):

// Example working toast call in a component method
showToast() {
  this.$bvToast.toast('Toast content here!', {
    title: 'Success',
    variant: 'success',
    autoHideDelay: 3000
  })
}

Why Your Initial Fix Didn't Work #

Chances are you modified the wrong Webpack config file. Electron-Vue's main process config (.electron-vue/webpack.main.config.js) doesn't affect the renderer process where your Vue app lives—updating the renderer config is the key here.

内容的提问来源于stack exchange，提问作者Kisis