Vue3+Vite生产构建后表单props未定义报错排查求助

问题场景 #

使用Vue3开发表单输入页面，<script setup>中通过defineProps定义表单相关Props，同时用defineEmits声明更新事件。本地开发时页面渲染、交互、API提交均正常，Vue DevTools也能正常查看Props，但通过Vite构建产物部署到负载均衡后的Nginx容器时，点击表单输入字段会触发orgName is not defined这类属性未定义的控制台错误，所有表单字段均出现类似问题。

代码实现 #

Script 代码 #

<script setup>...
const props = defineProps({
  orgName: String,
  contactName: String,
  contactEmail: String,
  addressLine1: String,
  addressLine2: String,
  city: String,
  stateAbbrev: String,
  zip: String
})

const emit = defineEmits([
  'update:orgName',
  'update:contactName',
  'update:contactEmail',
  'update:addressLine1',
  'update:addressLine2',
  'update:city',
  'update:stateAbbrev',
  'update:zip'
])
...</script>

Template 代码 #

<template>....
  <form @submit.prevent="onSubmit" class="add-form">
    <input
      class="form_input"
      type="text"
      id="OrgName"
      v-model="orgName"
      @input="$emit('update:orgName', $event.target.value)"
      required
      placeholder="Organization Name"
    />
    <input ...../>
    .....
  </form>....</template>

报错信息 #

Uncaught ReferenceError: orgName is not defined
    at a.onUpdate:modelValue.t.<computed>.t.<computed> [as _assign] (organization-add-page.98800913.js:1:2044)
    at HTMLInputElement.<anonymous> (index.0b002e58.js:1:58059)

Nginx 配置 #

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

排查步骤 #

• 验证构建产物本地运行情况
  执行vite build生成产物后，用vite preview在本地启动静态服务预览。如果本地预览也出现相同错误，说明问题出在代码或Vite构建配置；如果本地预览正常，问题则与Nginx或负载均衡配置相关。

• 修正Props的双向绑定写法
  当前模板中同时使用v-model="orgName"和手动@input触发emit属于冗余写法，且可能导致编译异常。Vue3中Props双向绑定的规范写法有两种：

  1. 使用带参数的v-model：

     <input
       class="form_input"
       type="text"
       id="OrgName"
       v-model:orgName="props.orgName"
       required
       placeholder="Organization Name"
     />
     

  2. 解构Props配合computed实现：

     import { toRefs, computed } from 'vue';
     const { orgName } = toRefs(props);
     const orgNameModel = computed({
       get: () => orgName.value,
       set: (val) => emit('update:orgName', val)
     });
     

     模板中使用v-model="orgNameModel"。规范写法能避免构建时的代码混淆或tree-shaking误删问题。

• 检查Vite构建配置
  临时关闭代码混淆（在vite.config.js中设置build.minify: false），重新构建部署。如果错误消失，说明默认的混淆配置导致Props被误处理，可进一步调整build.terserOptions或改用esbuild压缩。

• 排查Nginx与负载均衡问题

  • 清理Nginx缓存（若有配置），或验证浏览器是否加载了最新的构建资源（查看Network面板中js文件的返回状态和内容）。
  • 确认负载均衡是否正确转发请求，是否存在路径重写或请求头修改导致静态资源加载异常。比如负载均衡添加了路径前缀，但Nginx未做对应配置。

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