【前端踩地雷#1】處理前後端框架的模板衝突(Flask & Vue.js)

最近正在學Vue框架，打算把它拿來重構原本專案的JavaScript，結果第一步就踩雷XD遇到前後端框架上的模板衝突，決定記錄一下。

我的專案後端是用Python的框架Flask寫，html檔案放在templates裡面，但當我插入Vue.js的cdn，嘗試要在瀏覽器上印出Hello Vue卻印不出來，打開console.log也沒有跳出甚麼錯誤訊息。

原本的程式碼:

1
2
3
4
5
6
7
8
9
10
11

<div id="app">{{message}}</div>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: "Hello Vue!",
      };
    },
  }).mount("#app");
</script>

後來我把整段code貼給chatgpt，它告訴我有可能是因為Flask的模板引擎Jinja2 和Vue.js的模板引擎都有{{ }}的語法，產生衝突所以印不出Hello Vue，也因為語法有重疊導致Flask認為這是正確的語法console裡面不會有錯誤訊息。

後來問chatGPT得到解決辦法是在createApp裡面加入delimiters: ["[[", "]]"] ，意思是把原本包住變數的兩個大括號改成中括號，不讓兩個框架的語法重疊就解決了。

修改後:

1
2
3
4
5
6
7
8
9
10

<div id="app">[[message]]</div>
const { createApp } = Vue;
      createApp({
        data() {
          return {
            message: "Hello Vue!",
          };
        },
        delimiters: ["[[", "]]"],
      }).mount("#app");

留言: