Vue.js 3.x版本自定义模板分隔符设置不生效该如何解决？

问题根因 #

你的配置属性路径有误，Vue 3 中全局编译器选项需要挂载到app.config对象下，而非直接挂载到app实例上。另外根组件内的delimiters选项仅对单文件组件内的模板生效，对HTML页面内的内联模板不生效。

正确配置步骤 #

1. 你当前引入的https://unpkg.com/vue@3.1.2默认解析为带编译器的完整构建版本，符合内联模板编译要求，无需修改引入地址。
2. 按正确路径配置全局分隔符：

const app = Vue.createApp({
  data() {
    return {
      display: 'redbox',
      p: {
        title: '测试标题'
      }
    }
  }
})
// 正确写法：将delimiters配置到app.config.compilerOptions下
app.config.compilerOptions.delimiters = ['${', '}']
app.mount("#vue-enhanced-page")

3. 如果你是单文件组件场景，需要针对单个组件配置分隔符，可直接在组件选项中声明：

export default {
  delimiters: ['${', '}'],
  // 其余组件逻辑
}

配置完成后模板中书写的${p.title}就会被正确解析为变量渲染，不会原样输出。

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