Vue.js生产构建后DOM元素id属性丢失问题求助

本地通过yarn、vite运行Vue.js应用正常，但生产构建部署后DOM元素的动态id全部丢失，document.getElementById(id)始终返回null。源码中动态id写法为：

<div id="myId" + someUniqueId><div>

生产构建后的代码中能看到类似{id:"myId"+unref(r),modelValue:y.value}的内容，但实际DOM无id属性。

核心排查方向 #

1. 修正模板动态属性绑定写法 #

Vue模板中动态绑定属性必须使用v-bind（或简写:），当前写法不符合Vue语法规范：

• 错误写法：<div id="myId" + someUniqueId>（Vue会将整个字符串视为静态id，无法解析变量拼接）
• 正确写法：

<div :id="'myId' + someUniqueId"></div>
<!-- 或完整写法 -->
<div v-bind:id="'myId' + someUniqueId"></div>

本地开发时Vue的开发环境编译对语法错误有容忍度，但生产构建的压缩优化会直接剔除无效的静态属性，导致id丢失。

2. 检查Vite构建配置 #

确认vite.config.js/ts中是否存在可能移除属性的优化配置：

• 检查@vitejs/plugin-vue的templateOptions中minify选项是否过度移除动态属性
• 排查第三方代码压缩类插件是否误删了id属性

3. 验证Docker构建的产物正确性 #

• 先在本地执行yarn run build-no-check，生成dist目录后直接打开dist/index.html，检查DOM元素是否存在id属性，确认问题出在构建还是部署阶段
• 若本地构建产物正常，构建Docker镜像时使用docker build --no-cache强制刷新缓存，避免旧缓存导致的异常

4. 检查生产环境变量解析 #

确认someUniqueId在生产环境是否正确赋值：

• 若someUniqueId是响应式变量（如ref/reactive），需确保在模板中正确取值（比如直接引用或使用unref(someUniqueId)）
• 排查生产环境是否存在变量未初始化的情况，导致拼接后的id为空

附用户提供的Dockerfile #

FROM node:18-buster AS build
WORKDIR /app

COPY package*.json ./
RUN yarn install --frozen-lockfile
COPY . .
RUN yarn run build-no-check #does a vite build (instead of vue-tsc --noEmit && vite build)

FROM nginx:1.23 AS final
EXPOSE 80
COPY ./entrypoint.sh /usr/share/nginx/
COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf
RUN chmod +x /usr/share/nginx/entrypoint.sh
COPY --from=build /app/dist /usr/share/nginx/html

ENTRYPOINT ["/usr/share/nginx/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

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