如何修改Vue.js的分隔符以避免与Laravel冲突？

这个问题我之前也碰到过，Blade和Vue默认都用{{ }}作为模板分隔符，导致Blade会优先解析Vue的变量，进而引发错误。这里给你几个实用的解决办法，按需选择就行：

方法一：全局/局部修改Vue的分隔符 #

你可以在初始化Vue实例或者定义组件时，通过delimiters选项替换Vue的默认分隔符，比如改成[[ ]]这类不会和Blade冲突的符号。

示例1：修改单个组件的分隔符 #

在你的grid.js组件代码里添加delimiters配置：

Vue.component('demo-grid', {
  // 替换Vue的分隔符为[[ 和 ]]
  delimiters: ['[[', ']]'],
  template: '#grid-template',
  data() {
    return {
      sortKey: '',
      sortOrders: {},
      gridData: [/* 你的数据内容 */],
      gridColumns: ['name', 'age', 'email']
    }
  },
  // 组件其他方法逻辑...
})

然后把模板里的{{ }}替换成新的分隔符：

<script type="text/x-template" id="grid-template">
  <table v-if="filteredData.length">
    <thead>
      <tr>
        <th v-for="key in columns" @click="sortBy(key)" :class="{ active: sortKey == key }">
          [[ key | capitalize ]]
          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="entry in filteredData">
        <td v-for="key in columns">
          [[ entry[key] ]]
        </td>
      </tr>
    </tbody>
  </table>
  <p v-else>No matches found.</p>
</script>

示例2：全局修改Vue分隔符 #

如果整个项目都需要替换，在根Vue实例初始化时配置：

new Vue({
  el: '#app',
  delimiters: ['[[', ']]'],
  // 其他全局配置...
})

方法二：使用Blade的@verbatim指令 #

如果你不想修改Vue的语法，可以用Blade的@verbatim指令包裹Vue的代码块，这样Blade会跳过对这段代码的解析，直接交给Vue处理：

@verbatim
<div id="demo">
  <form id="search">
    Search <input name="query" v-model="searchQuery">
  </form>
  <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
  </demo-grid>
</div>
@endverbatim

额外注意点 #

看你的代码，布局文件layout.app.blade.php里已经有一个<div id="app">，而首页代码里又嵌套了一个同名的<div id="app">，这会导致Vue挂载时出现冲突（同一个页面不能有重复的id），建议把首页里的这个id改成其他名称，比如id="demo-app"。

内容的提问来源于stack exchange，提问作者Anil Kumar Sahu