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

我正在创建一个Django+Vue.js v3应用程序，发现它非常有用，因为我可以使用Django轻松渲染.Vue文件，并充分利用这两个方面。此安装程序正常工作，Django成功呈现.vue文件，然后由vue3 sfc加载程序拾取，但问题是我无法更改vue分隔符，无论是在组件级别还是在全局级别

一个有效但非常不方便的解决方案是使用Django{%verbatim%}

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

在此上下文中，是否有任何方法可以全局或在组件级别设置Vue分隔符

index.html：

常量选项={
moduleCache：{
vue:vue，
},
获取文件（url）{
返回获取（url）。然后（响应=>{
if（response.ok）{
返回response.text（）
}否则{承诺.拒绝（回应）}
}  );
},
addStyle（styleStr）{
const style=document.createElement（'style'）；
style.textContent=styleStr；
const ref=document.head.getElementsByTagName（'style'）[0]| | null；
文件头插入前（样式，参考）；
},
日志（类型，…参数）{
日志（类型，…args）；
}
}
const{loadModule，version}=window[“vue3-sfc-loader”]；
const app=Vue.createApp({
组成部分：{
“我的组件”：Vue.defineAsyncComponent（（）=>loadModule（'./myComponent.Vue'，选项）），
},
模板：`Hello`，
});
app.mixin（{分隔符：['[''，']]']}）；//这将设置全局分隔符
app.mount（“#app”）；

myComponent.vue：

[[msg]]
导出默认值{
数据（）{
返回{
msg:'test！'，//我可以在这里从django后端注入一个带有{{msg}的值
color:'blue'，//我可以在这里用{{color}}从django后端注入一个值
}
}
}
.举例{
颜色：v-bind（“颜色”）；
}
{%include“morestyle.css”%}

URL.py：

从django.url导入路径
从…起导入视图
URL模式=[
路径（“”，视图。基本组件），
路径（'myComponent.vue'，视图.specific_组件），
]

views.py：

从django.exe导入渲染
def基本组件（请求）：
返回呈现（请求'vuetest/index.html'）
def专用_部件（请求）：
颜色=‘蓝色’
msg='mesage fom后端'
返回渲染（请求，
“vuetest/components/myComponent.vue”，
上下文={'color'：颜色，
“msg”：msg}）

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

Vue.createApp({
//分隔符更改为ES6模板字符串样式
分隔符：['${'，'}']
})

---

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

对于任何感兴趣的人。vue3 sfc loader的0.2.22版解决了此问题，请参阅 和。

这在应用程序级别（在index.html中）起作用，但由于某些原因，不会传播到单个组件（.vue文件）。我认为vue3 sfc加载器可能会在v0.2.22（2021-01-23）中以某种固定方式覆盖此功能