如何在 Go 模板中安全集成 Vue.js（自定义 Vue 插值分隔符）-Golang-PHP中文网

如何在 Go 模板中安全集成 Vue.js（自定义 Vue 插值分隔符）

go 的 html 模板引擎与 vue.js 默认均使用 {{ }} 作为插值符号，直接混用会导致语法冲突；解决方案是通过 vue 的 delimiters 选项修改其模板解析分隔符，例如改为 [[ ]]，从而与 go 模板完全解耦。

go 的 html 模板引擎与 vue.js 默认均使用 {{ }} 作为插值符号，直接混用会导致语法冲突；解决方案是通过 vue 的 delimiters 选项修改其模板解析分隔符，例如改为 [[ ]]，从而与 go 模板完全解耦。

在 Go Web 应用（如使用 net/http 或 Gin、Echo 等框架）中，常通过 html/template 渲染服务端初始 HTML。当需要在该 HTML 中嵌入 Vue.js 实例（尤其是选项式 API 或 Vue 2/3 的非构建版本）时，若不作处理，Go 模板会提前解析并报错 template: unexpected "}" in operand —— 因为 {{ message }} 被 Go 当作模板变量而非 Vue 指令。

✅ 正确做法：为 Vue 实例显式配置自定义分隔符，避开 Go 模板的解析范围。

以 Vue 3（Composition API + CDN 版本）为例：

php版微信js-sdk支付接口类

下载

<!-- Go 模板文件（如 index.html） -->


<title>Vue + Go</title><div id="app">
    <!-- Go 模板可安全使用 {{ .Title }} -->
    <h1>{{ .Title }}</h1>
    <!-- Vue 使用 [[ ]]，不再与 Go 冲突 -->
    <p>欢迎，[[ name ]]！</p>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script>
    const { createApp } = Vue;
    createApp({
      data() {
        return { name: 'Alice' };
      },
      // ⚠️ 关键：覆盖默认分隔符
      delimiters: [['[[', ']]']]
    }).mount('#app');
  </script>

? 注意事项：

delimiters 仅对当前 Vue 实例生效，适用于 createApp()（Vue 3）或 new Vue()（Vue 2）；
不支持在 <script setup> 单文件组件（SFC）中动态设置，该配置仅适用于运行时编译场景（即使用 vue.global.js 等含 compiler 的版本）；</script>
若使用 Vite 或构建工具，推荐改用「服务端只提供 JSON API，前端完全分离」架构，从根本上规避模板冲突；
Go 模板中仍可自由使用 {{ .Field }}、{{ range }} 等语法，Vue 不会干涉。

? 总结：无需引入额外库或复杂转义，只需一行 delimiters: [['[[', ']]']] 配置，即可实现 Go 模板与 Vue 的无缝共存——简洁、可靠、符合 SSR 初级集成需求。