diff --git a/build-config/renderer-lyric/webpack.config.dev.js b/build-config/renderer-lyric/webpack.config.dev.js
index 60398d95..7956a132 100644
--- a/build-config/renderer-lyric/webpack.config.dev.js
+++ b/build-config/renderer-lyric/webpack.config.dev.js
@@ -17,6 +17,8 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"development"',
         ELECTRON_DISABLE_SECURITY_WARNINGS: 'true',
       },
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
       __static: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
     }),
   ],
diff --git a/build-config/renderer-lyric/webpack.config.prod.js b/build-config/renderer-lyric/webpack.config.prod.js
index 5c582010..0a7b444c 100644
--- a/build-config/renderer-lyric/webpack.config.prod.js
+++ b/build-config/renderer-lyric/webpack.config.prod.js
@@ -32,6 +32,8 @@ module.exports = merge(baseConfig, {
       'process.env': {
         NODE_ENV: '"production"',
       },
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
     }),
   ],
   optimization: {
diff --git a/build-config/renderer/webpack.config.dev.js b/build-config/renderer/webpack.config.dev.js
index 60398d95..7956a132 100644
--- a/build-config/renderer/webpack.config.dev.js
+++ b/build-config/renderer/webpack.config.dev.js
@@ -17,6 +17,8 @@ module.exports = merge(baseConfig, {
         NODE_ENV: '"development"',
         ELECTRON_DISABLE_SECURITY_WARNINGS: 'true',
       },
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
       __static: `"${path.join(__dirname, '../../src/static').replace(/\\/g, '\\\\')}"`,
     }),
   ],
diff --git a/build-config/renderer/webpack.config.prod.js b/build-config/renderer/webpack.config.prod.js
index f908a5c1..8607d5ec 100644
--- a/build-config/renderer/webpack.config.prod.js
+++ b/build-config/renderer/webpack.config.prod.js
@@ -31,6 +31,8 @@ module.exports = merge(baseConfig, {
       'process.env': {
         NODE_ENV: '"production"',
       },
+      __VUE_OPTIONS_API__: 'true',
+      __VUE_PROD_DEVTOOLS__: 'false',
     }),
   ],
   optimization: {
diff --git a/src/main/index.dev.js b/src/main/index.dev.js
index 9851a56c..79a2a276 100644
--- a/src/main/index.dev.js
+++ b/src/main/index.dev.js
@@ -6,16 +6,16 @@
  */
 const electron = require('electron')
 const electronDebug = require('electron-debug')
-const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer')
+const { default: installExtension, VUEJS3_DEVTOOLS } = require('electron-devtools-installer')
 // Install `electron-debug` with `devtron`
 electronDebug({
   showDevTools: true,
   devToolsMode: 'undocked',
 })
-
+console.log(VUEJS3_DEVTOOLS)
 // Install `vue-devtools`
 electron.app.on('ready', () => {
-  installExtension(VUEJS_DEVTOOLS)
+  installExtension(VUEJS3_DEVTOOLS)
     .then(name => console.log(`Added Extension:  ${name}`))
     .catch(err => console.log('An error occurred: ', err))
 })
diff --git a/src/renderer/components/core/Aside/index.vue b/src/renderer/components/core/Aside/index.vue
index f2af582a..3346a75f 100644
--- a/src/renderer/components/core/Aside/index.vue
+++ b/src/renderer/components/core/Aside/index.vue
@@ -13,6 +13,7 @@ import ControlBtns from './ControlBtns'
 import NavBar from './NavBar'
 
 export default {
+  name: 'CoreAside',
   components: { ControlBtns, NavBar },
   computed: {
     ...mapGetters(['setting']),
diff --git a/src/renderer/components/core/MusicComment/index.vue b/src/renderer/components/core/MusicComment/index.vue
index 84eba2a9..b7d8be22 100644
--- a/src/renderer/components/core/MusicComment/index.vue
+++ b/src/renderer/components/core/MusicComment/index.vue
@@ -34,6 +34,7 @@ import music from '@renderer/utils/music'
 import CommentFloor from './CommentFloor'
 
 export default {
+  name: 'MusicComment',
   props: {
     show: Boolean,
     musicInfo: {
diff --git a/src/renderer/components/core/PlayBar/index.vue b/src/renderer/components/core/PlayBar/index.vue
index 5cd188ba..1580116e 100644
--- a/src/renderer/components/core/PlayBar/index.vue
+++ b/src/renderer/components/core/PlayBar/index.vue
@@ -51,6 +51,7 @@ import usePlayProgress from '@renderer/utils/compositions/usePlayProgress'
 import { statusText, musicInfo, setShowPlayerDetail, isPlay, musicInfoItem, playInfo, playMusicInfo } from '@renderer/core/share/player'
 
 export default {
+  name: 'CorePlayBar',
   components: {
     ControlBtns,
   },
diff --git a/src/renderer/components/core/PlayDetail/index.vue b/src/renderer/components/core/PlayDetail/index.vue
index 7dfca309..3f3327f4 100644
--- a/src/renderer/components/core/PlayDetail/index.vue
+++ b/src/renderer/components/core/PlayDetail/index.vue
@@ -50,6 +50,7 @@ import LyricPlayer from './LyricPlayer'
 import PlayBar from './PlayBar'
 
 export default {
+  name: 'CorePlayDetail',
   components: {
     LyricPlayer,
     PlayBar,
diff --git a/src/renderer/components/core/Toolbar/index.vue b/src/renderer/components/core/Toolbar/index.vue
index 431d068d..0d4e2511 100644
--- a/src/renderer/components/core/Toolbar/index.vue
+++ b/src/renderer/components/core/Toolbar/index.vue
@@ -13,6 +13,7 @@ import ControlBtns from './ControlBtns'
 import SearchInput from './SearchInput'
 
 export default {
+  name: 'CoreToolBar',
   components: { SearchInput, ControlBtns },
   computed: {
     ...mapGetters(['setting']),