2

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

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

错误消息如下所示：

模块解析失败：意外令牌 (1:1)

您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来 > 处理此文件。见https://webpack.js.org/concepts#loaders {% extends 'base.html' %} | {% 从 webpack_loader 加载 render_bundle %} | {% 加载导航标签 %}

前端.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 环境的一小部分。

4

1 回答 1

0

现在我使用用户会话并通过windowvue 环境获取数据：

// 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
}

有更好的解决方案吗？

于 2020-12-10T10:11:50.610 回答