如何将django中的变量导入vue.js实例

问题描述

我想将django生成的html页面中的变量导入到App.vue组件中。

我的目标是传递一个表示用户AuthGroup的字符串，例如。 'milkman'，'hairdresser'或'supplier'

错误消息如下：

模块解析失败：意外令牌（1：1）

您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序>处理此文件。参见https://webpack.js.org/concepts#loaders {％扩展了'base.html'％} | {％从webpack_loader中加载render_bundle％} | {％load navtag％}

frontend.html

{% extends 'base.html' %}
{% load render_bundle from webpack_loader %}
{% load navtag %}

{% block head %}
<title>title</title>
<script>
    const test = "{{ auth_group }}" // variable/string needed in App.vue
</script>
{% endblock %}

[...]
{% block content_vue %}
    <div id="app">
         <app></app>
    </div>
    {% render_bundle 'app' %}
{% endblock %}

我不知道如何修改webpack或找到将django中的变量导入vue项目的方法。仅供参考：vue项目只是大型Django环境的一小部分。

解决方法

现在我使用用户会话，并通过window将数据获取到vue环境：

// frontend.html
<script>
  window.testToken = "{{ auth_group }}"
</script>

// 1. App.vue
async created() {                          
  store.dispatch('store/setTest')
}
// 2. in store
actions: {
  setTest({commit}) {
    commit('setToken')
  }
}
// 3. trigger mutation
mutations: {
  setToken(state) {
    state.token = testToken
  }
}
// 4. state
state: {
  token: '' // String from django is here
}

有更好的解决方案吗？