Vue中如何解析并渲染JSON文件内注入的变量占位符

根本原因 #

JSON内的${testPage}属于普通字符串内容，Vue的插值语法、v-html指令都只会原样输出字符串，不会自动识别其中的模板占位符，这和JSP服务端预编译的逻辑不同，因此无法直接生效。

最优实现方案（无安全风险，适配所有场景） #

你可以通过自定义占位符替换函数，匹配JSON中的${变量名}格式，替换为组件内对应的变量值，实现动态渲染：

1. 定义通用替换工具函数

// 入参1：待解析的模板字符串；入参2：变量上下文对象，存要替换的键值对
function parseTemplate(tpl, context) {
  return tpl.replace(/\${(\w+)}/g, (_, key) => {
    return context[key] ?? _
  })
}

2. 组件内引入函数后，在模板中直接调用即可，你原有v-html的逻辑无需修改：

<template>
  <!-- $data代表组件所有data属性，也可以自定义传入上下文对象，比如{testPage: testPage} -->
  <div v-html="parseTemplate(tips.home.general, $data)"></div>
</template>

<script>
export default {
  data: () => ({
    testPage: 'test demo page name',
    tips: {
      home: {
        general: "Welcome to ${testPage}!",
        button1: "Click this button to log in."
      }
    }
  }),
  methods: {
    parseTemplate
  }
}
</script>

注意事项 #

• 如果需要替换的变量来自props、computed或其他接口返回值，只需自定义传入上下文对象即可，例如parseTemplate(tips.home.general, {testPage: testPage, userName: userName})
• 该方案不会执行字符串内的任意代码，无XSS注入风险，即使JSON内容来自不可控第三方也可以安全使用，是最推荐的实现方式
• 若你100%确认JSON来源完全安全（仅内部人员可配置），也可以用new Function的方式实现支持运算、嵌套属性等复杂模板逻辑，但该方式存在极高的注入风险，非可控场景禁止使用。

内容的提问来源于stack exchange，提问作者dakockar