在 Django LANGUAGE_CODE 上设置 Vue.js 语言库答案

【问题标题】：Set Vue.js language base on Django LANGUAGE_CODE在 Django LANGUAGE_CODE 上设置 Vue.js 语言库
【发布时间】：2020-01-20 04:24:13
【问题描述】：

我有一个 Django 项目，我在其中的某些部分使用 Vue.js。我已经翻译了所有 django 部分，现在我如何翻译所有 Vue.js 部分。语言切换器位于 Django 模板页面上，它分别在所有 django 项目和应用程序中更改语言。我需要获取当前的 Django LANGUAGE_CODE 并将其用于设置 Vue.js 语言。

这是 app.js 的简短版本（我的 Vue.js 的入口点），我在其中导入带有翻译和设置 Vue 的 translations.json .js 语言

import Vue from 'vue';
import VModal from 'vue-js-modal';
import GetTextPlugin from 'vue-gettext';
import translations from '../../locale/translations';


const settings = {
  apiKey: '',
  lang: 'ru_RU',
  coordorder: 'latlong',
  version: '2.1',
};

Vue.use(GetTextPlugin, {
  availableLanguages: {
    en_US: 'American English',
    ru_RU: 'Russian',
  },
  defaultLanguage: 'ru_RU',
  translations,
});

如果我在 GetTextPlugin 中更改字段 defaultLanguage: 'LANGUAGE' 它将更改 Vue.js 的语言。所以我需要知道如何让 Django 当前语言在这里设置。

更新

正如迪克格罗滕所说的那样。但是现在 Vue 出现错误 "error 'LANGUAGE' is not defined no-undef"

base.html

{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<script>let LANGUAGE = {{ LANGUAGE_CODE }};</script>

<!DOCTYPE html>
<html lang="ru">
<head>
  {% include 'chunks/head.html' %}
  <title>{{ title }}</title>
</head>
<body>
{% include 'chunks/svg.html' %}
<div class="preloader">
  <div class="preloader__icon"></div>
</div>
{% block content %}{% endblock content %}

{% block popup %}{% endblock popup %}
{% block script %}
  {% include 'chunks/scripts.html' %}
{% endblock %}
</body>
</html>

Vue.js

Vue.use(GetTextPlugin, {
  availableLanguages: {
    en_US: 'American English',
    ru_RU: 'Russian',
  },
  defaultLanguage: LANGUAGE,
  translations,
});

【问题讨论】：

保留 URL 中的语言。就像 Instagram 所做的那样：instagram.com/?hl=en。这样你的django代码和vue代码就可以通过从url读取参数值来设置语言了。
您可以在基本模板中设置一个 javascript 变量：{% get_current_language as LANGUAGE_CODE %} const LANGUAGE = {{ LANGUAGE_CODE }}
@xyres Vue.js 会默认从 url 设置语言还是我应该手动设置？

标签： javascript django vue.js vuejs2

【解决方案1】：

在基本模板中设置一个 javascript 常量：

{% get_current_language as LANGUAGE_CODE %}
<script>const LANGUAGE = "{{ LANGUAGE_CODE }}"</script>

【讨论】：

照你说的做了。这是 base.html {% load i18n %} {% get_current_language as LANGUAGE_CODE %} <script>let LANGUAGE = {{ LANGUAGE_CODE }};</script> 这是 Vue.js Vue.use(GetTextPlugin, { ` availableLanguages: {` ` en_US: '美式英语',` ` ru_RU: '俄语', ` }, ` defaultLanguage : LANGUAGE,` `translations,` }); 但现在 Vue 中出现错误“error 'LANGUAGE' is not defined no-undef”
检查脚本的读取顺序。 let LANGUAGE = 是在 vue.js 脚本上方吗？也只是为了确保检查 html 源代码。我添加了引号，我认为它们是必需的。
是的，而且 Vue.js 可以将 LANGUAGE 视为全局变量。请检查我的问题中的更新部分