如何在petite-vue中配置全局模板分隔符，支持v-scope场景生效？

算力阿峰

2026-10-3

Petite-vue自定义模板分隔符实现方案

Petite-vue默认没有暴露delimiters配置项，插值分隔符的匹配逻辑硬编码在模板解析模块中，可通过以下两种方式实现全局自定义分隔符，同时兼容v-scope场景：

方案1：修改源码重新打包（稳定性最高）

拉取petite-vue官方源码，找到src/parse.ts文件
替换文件中默认的插值正则/{{([\s\S]+?)}}/g为自定义分隔符对应的正则，例如要改为${}格式，正则修改为/\$\{([\s\S]+?)\}/g（特殊符号需加转义符）
重新打包生成新的petite-vue产物，所有场景包括v-scope内的插值都会自动使用新的分隔符

方案2：运行时动态Patch（无需修改源码、无需重新打包）

在初始化petite-vue前插入以下代码，直接修改解析逻辑实现全局配置：

// NPM引入方式
import * as PetiteVue from 'petite-vue'

// CDN引入方式可直接替换为 window.PetiteVue
const originalParse = PetiteVue.parse
PetiteVue.parse = (template) => {
  // 自定义分隔符配置，可根据需求修改
  const [start, end] = ['${', '}']
  // 自动转义正则特殊字符
  const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  const customDelimiterRE = new RegExp(`${escapeRegExp(start)}([\\s\\S]+?)${escapeRegExp(end)}`, 'g')
  
  // 替换模板中所有自定义分隔符为默认{{}}格式，复用原有解析逻辑
  template = template.replace(customDelimiterRE, (_, exp) => `{{${exp.trim()}}}`)
  // 兼容v-scope属性中的自定义分隔符
  template = template.replace(new RegExp(`v-scope="${escapeRegExp(start)}([^${escapeRegExp(end.slice(-1))}]+)${escapeRegExp(end)}"`,'g'), (_, exp) => `v-scope="{{${exp.trim()}}}"`)

  return originalParse(template)
}

// 正常初始化应用
PetiteVue.createApp().mount()