fix(vite): apply vite server base url (#335)

Author: webfansplz

docs/guide/vite-plugin.md

@@ -59,13 +59,15 @@ interface VitePluginVueDevToolsOptions {
   /**
    * Customize openInEditor host (e.g. http://localhost:3000)
    * @default false
+   * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
    */
   openInEditorHost?: string | false
 
   /**
    * DevTools client host (e.g. http://localhost:3000)
    * useful for projects that use a reverse proxy
    * @default false
+   * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
    */
   clientHost?: string | false
 }

packages/client/src/composables/open-in-editor.ts

@@ -1,9 +1,7 @@
-import { openInEditor as _openInEditor, callViteServerAction } from '@vue/devtools-core'
+import { openInEditor as _openInEditor } from '@vue/devtools-core'
 
-const getOpenInEditorHost = callViteServerAction<string>('get-open-in-editor-host')
 export const vueInspectorDetected = ref(false)
 
 export const openInEditor = async (file: string) => {
-  const openInEditorHost = await getOpenInEditorHost()
-  return openInEditorHost ? _openInEditor(file, openInEditorHost) : _openInEditor(file)
+  return _openInEditor(file)
 }

packages/devtools-kit/src/core/open-in-editor/index.ts

@@ -8,11 +8,16 @@ export interface OpenInEditorOptions {
   column?: number
 }
 
+export function setOpenInEditorBaseUrl(url: string) {
+  target.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ = url
+}
+
 export function openInEditor(options: OpenInEditorOptions = {}) {
   const { file, baseUrl = window.location.origin, line = 0, column = 0 } = options
   if (file) {
     if (devtoolsState.vitePluginDetected) {
-      target.__VUE_INSPECTOR__.openInEditor(baseUrl, file, line, column)
+      const _baseUrl = target.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ ?? baseUrl
+      target.__VUE_INSPECTOR__.openInEditor(_baseUrl, file, line, column)
     }
     else {
       // @TODO: support other

packages/devtools-kit/src/index.ts

@@ -6,6 +6,7 @@ import { addCustomTab } from './core/custom-tab'
 import { addCustomCommand, removeCustomCommand } from './core/custom-command'
 import { toggleComponentInspectorEnabled } from './core/component-inspector'
 import { toggleHighPerfMode } from './core/high-perf-mode'
+import { setOpenInEditorBaseUrl } from './core/open-in-editor'
 
 export type * from './core/custom-tab'
 export type * from './core/custom-command'
@@ -50,4 +51,5 @@ export {
   setDevToolsEnv,
   toggleComponentInspectorEnabled,
   toggleHighPerfMode,
+  setOpenInEditorBaseUrl,
 }

packages/vite/package.json

@@ -56,7 +56,7 @@
     "execa": "^8.0.1",
     "sirv": "^2.0.4",
     "vite-plugin-inspect": "^0.8.3",
-    "vite-plugin-vue-inspector": "^4.0.2"
+    "vite-plugin-vue-inspector": "^5.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.12.5",

packages/vite/src/modules/get-config.ts

@@ -5,7 +5,4 @@ export function getViteConfig(config: ResolvedConfig, pluginOptions) {
   defineViteServerAction('get-vite-root', () => {
     return config.root
   })
-  defineViteServerAction('get-open-in-editor-host', () => {
-    return pluginOptions.openInEditorHost
-  })
 }

packages/vite/src/overlay.js

@@ -1,17 +1,22 @@
 import vueDevToolsOptions from 'virtual:vue-devtools-options'
 import { initAppSeparateWindow, setDevToolsClientUrl } from '@vue/devtools-core'
-import { addCustomTab, devtools, setDevToolsEnv, toggleComponentInspectorEnabled } from '@vue/devtools-kit'
+import { addCustomTab, devtools, setDevToolsEnv, setOpenInEditorBaseUrl, toggleComponentInspectorEnabled } from '@vue/devtools-kit'
 
-const overlayDir = `${vueDevToolsOptions.clientHost || ''}${vueDevToolsOptions.base || '/'}@id/virtual:vue-devtools-path:overlay`
+function normalizeUrl(url) {
+  return new URL(`${vueDevToolsOptions.base || '/'}${url}`, import.meta.url).toString()
+}
+
+const overlayDir = normalizeUrl(`@id/virtual:vue-devtools-path:overlay`)
 const body = document.getElementsByTagName('body')[0]
 const head = document.getElementsByTagName('head')[0]
 
 setDevToolsEnv({
   vitePluginDetected: true,
 })
 
-const devtoolsClientUrl = `${vueDevToolsOptions.clientHost || ''}${vueDevToolsOptions.base || '/'}__devtools__/`
+const devtoolsClientUrl = normalizeUrl(`__devtools__/`)
 setDevToolsClientUrl(devtoolsClientUrl)
+setOpenInEditorBaseUrl(normalizeUrl('').slice(0, -1))
 
 toggleComponentInspectorEnabled(!!vueDevToolsOptions.componentInspector)
 
@@ -24,7 +29,7 @@ addCustomTab({
   icon: 'i-carbon-ibm-watson-discovery',
   view: {
     type: 'iframe',
-    src: `${window.location.origin}${vueDevToolsOptions.base || '/'}__inspect`,
+    src: normalizeUrl(`__inspect/`),
   },
   category: 'advanced',
 })

packages/vite/src/vite.ts

@@ -44,13 +44,15 @@ export interface VitePluginVueDevToolsOptions {
   /**
    * Customize openInEditor host (e.g. http://localhost:3000)
    * @default false
+   * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
    */
   openInEditorHost?: string | false
 
   /**
    * DevTools client host (e.g. http://localhost:3000)
    * useful for projects that use a reverse proxy
    * @default false
+   * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
    */
   clientHost?: string | false
 
@@ -62,14 +64,12 @@ export interface VitePluginVueDevToolsOptions {
   componentInspector?: boolean | VitePluginInspectorOptions
 }
 
-const defaultOptions: DeepRequired<VitePluginVueDevToolsOptions> = {
+const defaultOptions: VitePluginVueDevToolsOptions = {
   appendTo: '',
-  openInEditorHost: false,
-  clientHost: false,
   componentInspector: true,
 }
 
-function mergeOptions(options: VitePluginVueDevToolsOptions): DeepRequired<VitePluginVueDevToolsOptions> {
+function mergeOptions(options: VitePluginVueDevToolsOptions): VitePluginVueDevToolsOptions {
   return Object.assign({}, defaultOptions, options)
 }
 
@@ -137,19 +137,20 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
     },
     async load(id) {
       if (id === 'virtual:vue-devtools-options')
-        return `export default ${JSON.stringify({ base: config.base, clientHost: pluginOptions.clientHost, componentInspector: pluginOptions.componentInspector })}`
+        return `export default ${JSON.stringify({ base: config.base, componentInspector: pluginOptions.componentInspector })}`
     },
     transform(code, id) {
-      const { root, base } = config
+      const { root } = config
 
-      const projectPath = `${root}${base}`
+      const projectPath = `${root}`
 
       if (!id.startsWith(projectPath))
         return
 
       const { appendTo } = pluginOptions
 
       const [filename] = id.split('?', 2)
+
       if (appendTo
         && (
           (typeof appendTo === 'string' && filename.endsWith(appendTo))
@@ -197,7 +198,6 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
       ...typeof pluginOptions.componentInspector === 'boolean'
         ? {}
         : pluginOptions.componentInspector,
-      openInEditorHost: pluginOptions.openInEditorHost,
       appendTo: pluginOptions.appendTo || 'manually',
     }) as PluginOption,
     plugin,