含Laravel Blade语法的博客内容在Vue.js中渲染异常的解决方案求助

嘿，这个问题我碰到过好多次了——Vue和Blade撞了双大括号语法，确实挺头疼的。下面给你几个实用的解决方案，按需选就行：

方案1：修改Vue的插值分隔符（彻底解决全局冲突） #

如果你的项目里经常需要展示Blade语法示例，直接改Vue默认的插值符号一劳永逸。这样Vue就不会把{{ $title }}当成自己的插值表达式了。

Vue 2.x 示例： #

new Vue({
  el: '#app',
  delimiters: ['[[', ']]'], // 把Vue的插值改成[[ ]]
  data: {
    vueTitle: '这是Vue的变量'
  }
})

之后在Vue模板里用[[ vueTitle ]]来渲染Vue变量，而{{ $title }}就会原封不动显示在页面上。

Vue 3.x 示例： #

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.compilerOptions.delimiters = ['[[', ']]'] // 配置分隔符
app.mount('#app')

方案2：用v-pre指令跳过局部编译 #

如果只是个别段落包含Blade语法，给对应的DOM元素加上v-pre指令就可以了。Vue会直接忽略这个元素及其子元素的编译过程，原样输出内容。

示例：

<div v-pre>
  这里的Blade语法会原封不动显示：{{ $title }}，@extends('layouts.app')
</div>

这个方法适合零散出现Blade代码的场景，不用改动全局配置。

方案3：后端/前端转义双大括号（适合已有内容的处理） #

如果你的博客内容已经存在数据库里，不想改Vue配置的话，可以在渲染前把{{和}}转义成HTML实体。

后端处理（Laravel端）： #

取出内容时替换转义：

$blogContent = str_replace(['{{', '}}'], ['{{', '}}'], $blogContent);

这样返回给前端的就是{{ $title }}，浏览器会渲染成{{ $title }}，同时Vue不会解析它。

前端处理（Vue里）： #

在渲染前用计算属性转义：

<template>
  <div v-html="escapedBladeContent"></div>
</template>

<script>
export default {
  props: ['blogContent'],
  computed: {
    escapedBladeContent() {
      return this.blogContent.replace(/{{/g, '&#123;&#123;').replace(/}}/g, '&#125;&#125;');
    }
  }
}
</script>

注意这里要用v-html渲染，因为转义后的是HTML实体，普通插值会显示实体代码而不是解析后的符号。

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