问题
如果我们使用 SpringMVC 的 index.tpl 驱动前端项目，那么，一般我们的做法是将打包生成的 index.html 原封不动的拷贝进 index.tpl 供 Java 驱动。
但是 SpringMVC 并不能给我们提供 query ，也就是说需要在 index.tpl 内添加 ${var} 形式的 tpl 模板变量，SpringMVC 在驱动视图时会替换这些模板变量，再将其挂载到全局，从而在我们的组件页面中就可以获取该值，渲染不同的页面。
唯一的问题是，在 public/index.html 中，你不能使用 ${var} 形式的变量，因为 html-webpack-plugin 插件会默认替换他们：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 不能如此使用 -->
<script>
window.node = "${node}"
</script>
</head>
打包会报错找不到该值：
解决
解决办法是将其作为 “变量” 的思路，一个静态字符串也可以作为变量，从而有：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用转义语法将字符串当做变量插入 -->
<script>
window.node = "<%= "${node}" %>"
</script>
</head>
此时 "${node}" 是一个字符串变量，替换时将会取真值（去掉引号）进行替换，从而 <%= "${node}" %> => ${node} ，再加上两侧引号即可。
最终打包结果 dist/index.html ：
<script>
window.node = "${node}"
</script>
扫一扫
1501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
