Vue js CLI 3 无法使用 Thymeleaf 语法构建答案

【问题标题】：Vue js CLI 3 fail to build with Thymeleaf syntaxVue js CLI 3 无法使用 Thymeleaf 语法构建
【发布时间】：2018-12-17 23:56:19
【问题描述】：

我正在开发一个基于 Vue.js CLI 3 和 Spring boot 作为后端的小型多页面应用程序。

我阅读了official doc 来构建一个多页面，所以我的vue.config.js 看起来像：

模块.exports = { outputDir: '目标/距离', 页数：{ 家： { 条目：'src/home/home.js', 模板：'src/home/home.html', 文件名：'home.js' }, 其他页面：{...} } }

一切正常，直到我在模板中添加一些 Thymeleaf 语法（例如，使用 placholders ${text}）。由于 ${} 占位符未解析，构建失败（我不知道哪个加载器或插件尝试解析这些占位符，我使用标准的 vue-cli webpack 项目结构..）。

有没有办法配置 webpack 以忽略 Thymeleaf 语法并且不尝试解析那些占位符？

【问题讨论】：

【解决方案1】：

我将$ 替换为<%="$"%> 为workaround。

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

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

然后我找到solution

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

【讨论】：