Vue3+Vite多应用共享组件开发调试配置问题求助

问题梳理 #

基于Vue3和Vite开发两个含共享组件的多页面应用，生产构建流程正常，但开发调试环节存在以下问题：

• 按Vite多页面文档提示访问子目录无效，launch.json配置/src/app1后页面空白无报错
• 将单个index.html移到根目录可调试，但切换应用需手动修改配置，操作繁琐
• Vite服务器自动打开页面能正常显示，但无法附加调试器

修正后的配置方案 #

1. 调整vite.config.js #

移除固定的server.base配置（避免默认绑定单个应用），保留多页面构建核心配置：

import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    // 移除固定base，让服务器默认指向项目根目录
    open: false, // 关闭自动打开，由调试配置控制目标页面
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js',
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      app1: fileURLToPath(new URL('./src/app1', import.meta.url)),
      app2: fileURLToPath(new URL('./src/app2', import.meta.url)),
    }
  },
  build: {
    rollupOptions: {
      input: {
        app1: resolve(__dirname, './src/app1/index.html'),
        app2: resolve(__dirname, './src/app2/index.html'),
      },
    },
  },
})

2. 配置launch.json（支持双应用独立调试） #

为每个应用单独添加调试项，确保url指向对应应用的index.html，简化路径映射：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "name": "调试App1",
      "url": "http://localhost:5173/src/app1/index.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "调试App2",
      "url": "http://localhost:5173/src/app2/index.html",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

3. 验证index.html路径正确性 #

确保每个应用目录下的index.html中，main.js采用相对路径引用：

<!-- src/app1/index.html -->
<script type="module" src="./main.js"></script>

<!-- src/app2/index.html -->
<script type="module" src="./main.js"></script>

调试步骤 #

1. 保存所有配置文件
2. 在VS Code调试面板中选择对应调试项（「调试App1」或「调试App2」）
3. 启动调试，Vite会自动启动开发服务器并打开目标页面，同时附加调试器

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