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

【问题标题】：How to import a variable from django into vue.js instance如何将 django 中的变量导入 vue.js 实例
【发布时间】：2021-02-11 18:37:30
【问题描述】：

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

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

错误信息如下所示：

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

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

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

【问题讨论】：

标签： django vue.js webpack webpack-loader django-webpack-loader

【解决方案1】：

现在我使用用户会话并通过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
}

有没有更好的解决方案？

【讨论】：