带有 Django 和 Vue-loader 的 Vue.js 组件特定分隔符

Question

我正在创建一个 Django + Vue.js v3 应用程序，发现使用 vue3-sfc-loader 非常有用，因为我可以使用 Django 轻松渲染 .vue 文件，并获得两全其美的效果。此设置有效，Django 成功呈现 .vue 文件，然后由 vue3-sfc-loader 拾取，但问题是我无法更改 Vue 分隔符，无论是在组件级别还是在全局级别。

一种可行但非常不方便的解决方案是使用 Django {% verbatim %}。

我也尝试使用 Vue 全局 mixins 来设置分隔符，但没有成功，尽管我不确定在我的上下文中是否正确使用了 then。

在这种情况下，有什么方法可以全局或在组件级别设置 Vue 分隔符？

index.html:

<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
  <script>


    const options = {
      
      moduleCache: {
        vue: Vue,
      },
      
      getFile(url) {
        return fetch(url).then(response => {
          if (response.ok) {
            return response.text()
          } else {Promise.reject(response)}
        }  );
      },
      
      addStyle(styleStr) {
        const style = document.createElement('style');
        style.textContent = styleStr;
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      },
      
      log(type, ...args) {
        console.log(type, ...args);
      }
    }
    
    const { loadModule, version } = window["vue3-sfc-loader"];


    const app = Vue.createApp({
      components: {
        'my-component': Vue.defineAsyncComponent(() => loadModule('./myComponent.vue', options)),
      },
      template: `Hello <my-component></my-component>`,
    });

    app.mixin({ delimiters: ['[[',']]'] }); // this was expected to set the global delimiters

    
    app.mount('#app');
  </script>
</body>
</html>

myComponent.vue:

<template>
  <span class="example">[[msg]]</span>
</template>
<!-- this works: <span class="example">{% verbatim %}{{ msg }}{% endverbatim %}</span> -->

<script>
  export default {
    data () {
      return {
        msg: 'test!',  // I can inject a value from django backend here with '{{ msg }}'
        color: 'blue', // I can inject a value from django backend here with '{{ color }}'
      }
    }
  }
</script>

<style scoped>
  .example {
    color: v-bind('color');
  }
  
  {% include "morestyle.css" %}
</style>

urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.base_component),
    path('myComponent.vue', views.specific_component),
]

views.py：

from django.shortcuts import render


def base_component(request):
    return render(request, 'vuetest/index.html')


def specific_component(request):
    color = 'blue'
    msg = 'mesage fom backend'
    return render(request,
                  'vuetest/components/myComponent.vue',
                  context={'color': color,
                           'msg': msg})

Answer 1

对于任何有兴趣的人。该问题在 vue3-sfc-loader 的 0.2.22 版本中得到解决，请参阅 discussion 和 reference。

Answer 2

您可以在 vue3 中全局更改delimiters，如下所示

Vue.createApp({
  // Delimiters changed to ES6 template string style
  delimiters: ['${', '}']
})

这应该可以解决您的问题。