时间戳

首页 > 解决方案 > 在 Django LANGUAGE_CODE 上设置 Vue.js 语言库

javascript - 在 Django LANGUAGE_CODE 上设置 Vue.js 语言库

问题描述

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

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

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 当前语言在这里设置。

更新

正如dirkgroten所说的那样。但是现在Vue中出现错误“错误'LANGUAGE'未定义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,
});

标签： javascriptdjangovue.jsvuejs2

解决方案

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

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

推荐阅读