feat(app-webpack): workaround vue/devtools issue when used with webpack

quasarframework · Jul 31, 2023 · 543dd9e · 543dd9e
1 parent 9399f0a
commit 543dd9e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/app-webpack/lib/webpack/plugin.html-addons.js b/app-webpack/lib/webpack/plugin.html-addons.js
@@ -8,13 +8,13 @@ function makeTag (tagName, attributes, closeTag = false) {
   }
 }
 
-// function makeScriptTag (innerHTML) {
-//   return {
-//     tagName: 'script',
-//     closeTag: true,
-//     innerHTML
-//   }
-// }
+function makeScriptTag (innerHTML) {
+  return {
+    tagName: 'script',
+    closeTag: true,
+    innerHTML
+  }
+}
 
 function fillBaseTag (html, base) {
   return html.replace(
@@ -39,6 +39,14 @@ module.exports.HtmlAddonsPlugin = class HtmlAddonsPlugin {
           data.html = fillBaseTag(data.html, this.cfg.build.appBase)
         }
 
+        if (this.cfg.metaConf.vueDevtools !== false) {
+          const { host, port } = this.cfg.metaConf.vueDevtools
+          data.headTags.push(
+            makeScriptTag(`window.__VUE_DEVTOOLS_HOST__ = '${ host }';window.__VUE_DEVTOOLS_PORT__ = '${ port }';`),
+            makeTag('script', { src: `http://${ host }:${ port }` }, true)
+          )
+        }
+
         if (this.cfg.ctx.mode.cordova) {
           data.bodyTags.unshift(
             makeTag('script', { src: 'cordova.js' }, true)

diff --git a/app-webpack/templates/entry/app.js b/app-webpack/templates/entry/app.js
@@ -26,10 +26,6 @@
   <% } %>
 <% } %>
 
-<% if (metaConf.vueDevtools !== false) { %>
-import vueDevtools from '@vue/devtools'
-<% } %>
-
 import { Quasar } from 'quasar'
 import { markRaw } from 'vue'
 import <%= metaConf.needsAppMountHook === true ? 'AppComponent' : 'RootComponent' %> from 'app/<%= sourceFiles.rootComponent %>'
@@ -47,10 +43,6 @@ const RootComponent = defineComponent({
       SplashScreen.hide()
       <% } %>
 
-      <% if (metaConf.vueDevtools !== false) { %>
-      vueDevtools.connect('<%= metaConf.vueDevtools.host %>', <%= metaConf.vueDevtools.port %>)
-      <% } %>
-
       <% if (ctx.mode.ssr && ssr.manualPostHydrationTrigger !== true) { %>
       const { proxy: { $q } } = getCurrentInstance()
       $q.onSSRHydrated !== void 0 && $q.onSSRHydrated()