与 Thymeleaf 集成的 Vuetify Vue 3 应用程序不渲染

Question

我正在尝试将 Vuetify Vue 3 应用程序作为小部件插入 Thymeleaf 模板中。 Thymeleaf 模板加载成功，我可以在浏览器控制台中看到我的 Vue 应用程序正在初始化。但是，Vue 应用程序不会渲染。

百里香叶页面

<!DOCTYPE html>  
<html class="h-100" lang="en">  
<head>  
<meta charset="UTF-8">  
<title>ThymeLeaf client</title>  
<link rel="stylesheet" href="/webjars/bootstrap/5.3.2/css/bootstrap.min.css">  
<script type="module" async crossorigin src="/main.bundle.js"></script>  
<link rel="stylesheet" href="/assets/index.37be1ef8.css">  
</head>  
<body class="d-flex flex-column h-100">  
    <div th:replace="~{fragments/header :: header}"></div>  
    <div th:replace="~{fragments/homeContent :: content}"></div>  
    <div id="app"></div>  
    <div th:replace="~{fragments/footer :: footer}"></div>  
      
    <script src="/webjars/bootstrap/5.3.2/js/bootstrap.min.js"></script>  
</body>  
</html>

其中

<div id="app"></div>

是一个用于挂载vuetify应用程序的div。

我注意到在 chrome 开发工具中，

<div id="app"></div>

转变为

<div id="app" data-v-app=""><!----></div>

。这意味着 vue 开始将 vue 应用程序加载到此元素中，但停止时没有任何错误消息。

我还在应用程序引导的 vuetify 项目中添加控制台日志输出并查看输出

registerPlugins
registerPlugins::loadFonts()
registerPlugins::use plugins
before app.mount('#app') {_uid: 0, _component: {…}, _props: null, _container: null, _context: {…}, …}
App.vue
app.mount('#app') completed

此外，在终端中我打开

backend/target/classes/static

文件夹，vuetify 应用程序在其中生成所有 js/css 资源并启动 http-服务器。然后在浏览器中打开 http://localhost:8080/ 我的应用程序已正确加载。

在转向 Vuetify 应用程序之前，我对使用 VueCLI 生成的普通 Vue 3 应用程序执行了相同的步骤，一切都很好（唯一的区别是使用 webpack 和 VueCLI 构建的普通 Vue3 应用程序，而 Vuetify 使用 Vite 构建捆绑包）。

知道接下来要尝试什么吗？

更新：我注意到控制台中有一条消息

repairOnline:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

PS。是的，我知道最好将后端和前端应用程序构建为单独的项目。目前，这是将现代 UI 引入大型遗留项目的策略步骤。

Answer 1

之前：

之后：

请添加属性 xmlns =“http://www.w3.org/1999/xhtml”xmlns：th =“http://www.thymeleaf.org”

与 Thymeleaf 集成的 Vuetify Vue 3 应用程序不渲染

问题描述投票：0回答：1

1个回答

最新问题

与 Thymeleaf 集成的 Vuetify Vue 3 应用程序不渲染

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1