为什么Vue.js组件在Spring Boot项目的HTML文件中无法正常渲染？

核心故障点 #

• 组件注册逻辑未生效：你在components.js中完成了menu-bar组件的全局注册，但入口文件index.js完全没有引入该文件，注册逻辑从未执行，挂载到#vueApp的Vue实例无法识别自定义标签。
• 打包产物未引入页面：webpack构建生成的JS文件输出在/src/main/resources/static/dist目录下，但你的Thymeleaf模板没有添加对应脚本引入标签，Vue框架和业务逻辑根本没有加载到页面中。
• 冗余无效代码干扰：index.js中第一个Vue实例的挂载目标是#app，你的页面不存在该ID的元素，属于无效逻辑，建议清理避免额外资源消耗。

修复步骤 #

1. 修改index.js文件，引入组件注册逻辑，清理冗余代码，修改后示例：

import Vue from "vue";
// 新增引入组件注册逻辑
import './components.js'

Vue.config.devtools = true;

// 仅保留对应页面元素的Vue实例
new Vue({
    el: '#vueApp'
})

2. 修改Thymeleaf HTML模板，在</body>标签前添加打包后JS的引入逻辑：

<script th:src="@{/dist/main.js}"></script>
</body>

3. 重新执行npm构建命令生成最新打包产物，重启Spring Boot应用后刷新页面即可正常渲染组件。

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