Vue3多页面配置下复用组件无报错无警告无法渲染问题

问题原因 #

1. 模板语法存在隐性错误：v-for循环未声明index变量，你在调用removeCertificate(index)时传入的index属于未定义变量，同时你直接将certificate对象作为key属性值，不符合Vue要求key为字符串、数字等基础类型的规则，会导致列表渲染异常。
2. 多页面打包未抽离公共依赖：默认多页面配置下，两个入口会各自打包一份Vue及第三方依赖，运行时存在两个独立的Vue实例，冲突导致错误被静默吞掉，这也是删除一个页面配置后功能恢复正常的核心原因。

解决步骤 #

1. 修复模板语法问题，调整v-for写法，补充index声明、修改key绑定规则：

<!-- 把原来的tr标签替换为以下写法，优先用certificate的唯一主键作为key，没有的话可临时用index代替 -->
<tr v-for="(certificate, index) in certificates" :key="certificate.id ?? index">

2. 在vue.config.js中添加公共代码抽离配置，避免多页面重复打包依赖导致运行时冲突：

module.exports = {
    outputDir: "../wwwroot/app",
    pages: {
        vehicleDetails: "src/VehicleDetails.js",
        driverDetails: "src/DriverDetails.js"
    },
    // 新增以下配置
    configureWebpack: {
        optimization: {
            splitChunks: {
                chunks: 'all',
                cacheGroups: {
                    common: {
                        name: 'common',
                        minChunks: 2,
                        priority: -20,
                        reuseExistingChunk: true
                    }
                }
            }
        }
    }
};

3. 可在页面入口文件中添加Vue全局错误捕获，避免后续错误被静默吞掉便于排查问题：

// 入口文件中挂载实例前添加
const app = createApp(App)
app.config.errorHandler = (err) => {
  console.error('Vue运行错误：', err)
}
app.mount('#app')

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