Vue3生产构建/预览时报TypeError: Cannot set properties of undefined (setting '5')

核心问题定位 #

报错TypeError: Cannot set properties of undefined (setting '5')的根源是**customizeColor方法存在两处关键错误**，开发模式下Vue的容错机制掩盖了问题，但生产构建的严格校验会直接触发报错：

1. 未通过this访问组件实例数据：方法里直接写character[flag][id] = val，这里的character是未定义变量，并非组件data中的this.character，导致character[flag]为undefined，赋值时抛出错误。
2. switch分支未添加break：case 'hair'分支没有终止语句，会穿透执行case 'eyeColor'的代码，引发额外逻辑错误。

修复步骤 #

1. 修正customizeColor方法 #

把所有直接引用character的地方改为this.character，并给每个case分支添加break：

customizeColor: function(flag, id, val) {
    console.log(id);

    switch (flag) {
        case 'hair': {
            this.character[flag][id] = val;
            alt.emit('characterCustomize', 'haircolor', JSON.stringify(this.character[flag]));
            break;
        }
        case 'eyeColor': {
            this.character[flag] = val;
            alt.emit('characterCustomize', 'eyeColor', JSON.stringify(this.character[flag]));
            break;
        }
    }
},

2. 可选：添加健壮性校验 #

为避免类似未定义错误，可在赋值前检查目标属性是否存在，以customize方法为例：

customize: function(flag, id, val) {
    console.log("Flag: " + flag + " ID: " + id + " Value: " + val);
    if (this.character[flag]) {
        this.character[flag][id] = val;
        console.log(this.character);
        alt.emit('characterCustomize', flag, JSON.stringify(this.character[flag]));
    }
},

3. 验证修复效果 #

执行生产构建命令（如npm run build），预览构建产物，确认控制台不再抛出该错误。

开发与生产模式差异说明 #

Vue开发模式会提供宽松的运行环境和警告提示，未定义变量的问题可能被内部机制隐式处理；但生产构建会启用压缩、树摇和严格模式，所有隐式错误都会直接暴露为运行时异常。

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