Question

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

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

module.exports = {
    outputDir: 'target/dist',
    pages: {
        home: {
            entry: 'src/home/home.js',
            template: 'src/home/home.html',
            filename: 'home.js'
        },
        otherPage: {...}
    }
}

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

是否有一种方法可以配置Webpack从而忽略Thymeleaf语法并且不尝试解析这些占位符？

Answer 1

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

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

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

然后我发现了solution

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

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

1 个答案: