Vue3 Vite构建报错SyntaxError: Assigning to rvalue定位

问题现象 #

基于Vite 2.9.12构建Vue3单页应用生产包时触发构建失败，原始报错信息如下：

vite v2.9.12 building for production... ✓ 75 modules transformed.
[rollup-plugin-dynamic-import-variables] Assigning to rvalue (1907:44)
file: /ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/src/components/RecipeEditor.vue:1907:44
error during build:
SyntaxError: Assigning to rvalue (1907:44)
    at Parser.pp$4.raise (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:19738:13)
    at Parser.pp$7.toAssignable (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18231:12)
    at Parser.pp$5.parseMaybeAssign (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18754:21)
    at Parser.pp$5.parseParenAndDistinguishExpression (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:19209:28)
    at Parser.pp$5.parseExprAtom (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:19072:41)
    at Parser.pp$5.parseExprSubscripts (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18905:19)
    at Parser.pp$5.parseMaybeUnary (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18871:17)
    at Parser.pp$5.parseExprOps (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18798:19)
    at Parser.pp$5.parseMaybeConditional (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18781:19)
    at Parser.pp$5.parseMaybeAssign (/ORIGINAL-P1/LARAVEL-BREW/BrewersCompanion/vue/node_modules/rollup/dist/shared/rollup.js:18748:19)

排查过程 #

• 报错指向RecipeEditor.vue第1907行第44列，检查该行附近代码未发现给右值赋值的非法语法，对应代码片段如下：

//Gravity (line 1905)
let fixed_og = ref();

let showConfirmGravity = ref(false);
function adaptFermentablesToNewGravity() {
    let equipment = store.getters["equipment/getEquipmentById"](
        recipe_model.equipment
    );
    let old_extract_added_to_boil = extract_added_to_boil.value;
    let old_extract_from_mash = extract_from_mash.value;
    let P = SGToPlato(recipe_model.original_gravity);
  
    if (P < 1) {
        P = 1;
    }
    //original gravity is for postboil volume
    let new_extract_mass = extract_mass_from_platos_and_volume(
        P,
        postboil_volume_reverse_cold.value
    );
    //FOR MASH
    let new_extract_from_mash =
        (new_extract_mass * old_extract_from_mash) /
        (old_extract_added_to_boil + old_extract_from_mash);

    recipe_model.fermentables.forEach((element) => {
        if (element.use === "mash") {
            element.quantity =
                1 *
                (element.quantity / old_extract_from_mash) *
                new_extract_from_mash;
        }
    });

    //FOR BOIL
    let new_extract_added_at_boil =
        (new_extract_mass * old_extract_added_to_boil) /
        (old_extract_added_to_boil + old_extract_from_mash);

    recipe_model.fermentables.forEach((element) => {
        if (element.use === "boil" || element.use === "steep") {
            element.quantity =
                1 *
                (element.quantity / old_extract_added_to_boil) *
                new_extract_added_at_boil;
        }
    });
}

• 通过逐段注释script代码、逐块回加验证，最终定位问题和两处结构相似的computed计算属性相关，示例代码如下：

const after_sparge_and_lauter_volume_hot_display = computed(() => {
    return adapt_volume_to_unit(after_sparge_and_lauter_volume_hot.value);
});

• 模板中对应v-model绑定片段如下：

<div
   class="flex flex-row w-full justify-start align-middle"
>
   <label class="w-80">
       {{i18n.$t("After Sparge Boil Volume (hot)")}}
   </label>
   <div class="flex flex-row">
       <input
          type="number"
          v-model="after_sparge_and_lauter_volume_hot_display"
          class="w-20 h-5 ml-2 mr-4 text-sx bg-cyan-100"
          disabled="true"
        />
          {{ volume_initial_selection }}
    </div>
   </div>

• 此前多次使用同类代码模式从未触发问题，删除原有模板片段、重写视觉完全一致的代码后构建恢复正常，但无法定位错误根因，也无法解释报错行号和实际问题位置不匹配的现象。

根因解释 #

1. 报错触发逻辑 #

Assigning to rvalue（给右值赋值）的本质是语法层面尝试给不能作为赋值目标的值做赋值操作。
Vue SFC编译器处理模板时，会把v-model="xxx"展开为值绑定+更新事件赋值的组合逻辑，近似等价于:model-value="xxx" @update:model-value="xxx = $event"。你绑定的after_sparge_and_lauter_volume_hot_display是没有setter的只读computed属性，编译生成的赋值逻辑本质是给函数返回值（右值）赋值，本身属于非法语法。

之前用同类模式没报错，是因为开发模式下Vite的编译校验宽松，加上input设置了disabled="true"不会实际触发输入赋值，开发阶段不会触发严格语法校验；但生产构建阶段Rollup会做完整的AST语法解析，会直接拦截所有非法赋值语法。

2. 行号错位原因 #

Vite 2.x版本处理Vue SFC文件时，template、script、style块的source map映射存在已知缺陷：如果template块中混入了不可见特殊字符（最常见的是复制粘贴带进来的零宽空格、隐形控制字符），或者template块长度超过阈值，编译后生成的JS代码和原始SFC文件的行号映射会出现偏移，导致报错指向script块的无关位置，和实际出问题的template代码位置不匹配。
这也解释了为什么重写视觉上完全一致的模板后问题消失——重写过程清除了原模板片段里混入的不可见特殊字符，source map映射恢复正常，编译器正常识别绑定逻辑后就不再抛出错位报错。

3. 正确修复方式 #

• 只读展示的表单项不要用v-model绑定，直接用:value做单向绑定即可，和input的disabled状态逻辑也匹配：

<input
  type="number"
  :value="after_sparge_and_lauter_volume_hot_display"
  class="w-20 h-5 ml-2 mr-4 text-sx bg-cyan-100"
  disabled="true"
/>

• 如果确实需要双向绑定，给对应computed属性实现setter逻辑，禁止用无setter的只读计算属性直接绑定v-model。
• 后续遇到Rollup报行号不匹配的语法错误时，不要只局限于报错指向的script行范围，优先检查template块的v-model绑定、动态表达式是否存在非法赋值。

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