Vite运行时动态Base URL配置问题：开发环境未解决

针对你开发环境中Vite配置无法适配Electron动态代理URL的问题，以下几个方案可以实现类似Webpack中./的相对路径行为：

方案1：配置server.origin实现相对资源路径 #

在Vite配置文件中，通过设置server.origin为空字符串，让开发环境下所有资源路径以相对当前页面的方式生成，完全匹配Webpack中publicPath: './'的效果：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './', // 保留生产环境的相对路径配置
  server: {
    origin: '' // 开发环境下强制资源路径相对化
  }
})

这个配置会让Vite开发服务器输出的所有资源引用（如JS、CSS、图片）都使用相对路径，不管Electron的代理URL端口或appId如何变化，都能正确加载本地资源。

方案2：自定义插件修正资源路径前缀 #

如果server.origin的配置无法满足需求，可以编写一个简单的Vite插件，手动替换开发环境下的绝对路径前缀：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'dynamic-base-fix',
      transformIndexHtml(html) {
        // 将Vite自动注入的绝对路径资源转为相对路径
        return html
          .replace(/\/@id\//g, './@id/')
          .replace(/\/node_modules\//g, './node_modules/')
          .replace(/\/src\//g, './src/')
      }
    }
  ],
  base: './'
})

方案3：Electron代理层适配Vite路径 #

在Electron主进程中添加代理转发逻辑，将动态代理URL的请求映射到Vite开发服务器的固定地址：

// Electron主进程代码示例
const { app, BrowserWindow, session } = require('electron')

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({ width: 800, height: 600 })
  
  // 拦截请求，转发动态代理URL到Vite开发服务器
  session.defaultSession.webRequest.onBeforeRequest((details, callback) => {
    // 匹配动态代理URL的格式：http://localhost:端口/__apps/appId/
    const proxyUrlMatch = details.url.match(/http:\/\/localhost:\d+\/__apps\/[^\/]+\//)
    if (proxyUrlMatch) {
      const viteDevUrl = 'http://localhost:5173/' // Vite默认开发端口，可根据实际修改
      const newUrl = details.url.replace(proxyUrlMatch[0], viteDevUrl)
      callback({ redirectURL: newUrl })
    } else {
      callback({})
    }
  })

  mainWindow.loadURL('http://domain.host/my-app/') // 加载远程应用地址
})

这种方式不需要修改Vite的核心配置，通过Electron的请求转发，让动态代理路径下的资源请求都指向Vite开发服务器，同时保持Vite的base: './'配置即可正常加载。

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