Vue js CLI 3无法使用Thymelaf语法构建

Question

我正在开发一个基于Vue.js CLI3和Spring boot的多页应用程序。

我阅读了官方文档来构建多页，所以我的vue.config.js看起来像：

module.exports={outputDir:'target/dist'，页码：{主页：{entry:'src/home/home.js'，template:'src/home/home.html'，filename：'home.js'}，其他页面：｛…｝}}

一切都很好，直到我在模板中添加了一些Thymelaf语法(例如，使用placholders${text}(。构建失败是因为${}占位符未解析(我不知道哪个加载程序或插件试图解析这些占位符，我使用标准的vue-cli webpack项目结构。(。

有没有一种方法可以配置webpack，从而忽略Thymelaf语法，而不试图解析这些占位符？

Answer 1

作为解决方法，我用<%="$"%>替换了$。

但它不适用于<script></script>

<script>
var user = <%="$"%>{user};
</script>

然后我找到了解决方案

<script th:inline="javascript">
/*<![CDATA[*/
var user = /*[[<%="$"%>{user}]]*/ 'default';
/*]]>*/
</script>