Django+vue国际化

鉴于众多博客关于Django的国际化都不是前后端分离，在此制作一片关于前后端分离的国际化文章，博文经供参考：

一：Django后台:

基本步骤：

一些必要的配置
在代码中标记需要翻译的文本
使用 makemessages 命令生成 po 文件
编译 compilemessages 命令编译 mo 文件

1:配置：

在setting.py中进行国际化中间插入，language语言包文件路径
在setting.py文件中MIDDLEWARE=[]中添加
'django.middleware.locale.LocaleMiddleware',
LocaleMiddleware 可以决定使用何种语言。具体来说，LocaleMiddleware 是按照下面的顺序（优先级递减）：

i18n_patterns
request.session[settings.LANGUAGE_SESSION_KEY]
request.COOKIES[settings.LANGUAGE_COOKIE_NAME]
request.META['HTTP_ACCEPT_LANGUAGE']，即 HTTP 请求中的 Accept-Language header
settings.LANGUAGE_CODE

如下：

# 中间件
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    # 'users.middleware.InterfacePermission',
    'django.middleware.locale.LocaleMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

在setting.py里添加language语言包文件路径，如下：

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# 国际化语言包
LOCALE_PATHS = (
    os.path.join(BASE_DIR, 'language'),
)
LANGUAGES = (
    ('en', 'English'),
    ('zh', '中文'),
)

注意：如果你是中文转英文则需要把LANGUAGE_CODE = 'en-us'改成LANGUAGE_CODE = 'zh-hans',反之

2：标记需要翻译的文本

引用包 from django.utils.translation import gettext as _
在需要使用翻译的地方使用：_("*****")(我这里使用中文转英文所以需要在setting.py中修改LANGUAGE_CODE)

class TestViewSet(ChenAllViewSet):
    def create(self, request, *args, **kwargs):
        return ReturnData(message=_("成功"))

    def list(self, request, *args, **kwargs):
        return ReturnData(message=_("失败"))

3：使用 makemessages 命令生成 po 文件

在执行这一步之前，请先通过 xgettext --version 确认自己是否安装了 GNU gettext。GNU gettext 是一个标准 i18n L10n 库，Django 和很多其他语言和库的多语言模块都调用了 GNU gettext，所以接下来讲的一些 Django 特性实际上要归功于 GNU gettext。如果没有安装的话可以通过下面的方法安装：

ubuntu:

$ apt update
$ apt install gettext

macOS:

$ brew install gettext
$ brew link --force gettext

windows
安装完 GNU gettext 后，对 Django 工程执行下面的命令

$ python3 manage.py makemessages --local en

django.po文件大致长这个样子

# SOME DESCRIPTIVE TITLE.
# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
# This file is distributed under the same license as the PACKAGE package.
# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
#
#, fuzzy
msgid ""
msgstr ""
"Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2019-05-23 09:35+0000\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"Language: \n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1);\n"

#: apps/users/views.py:650
msgid "成功"
msgstr "success"

#: apps/users/views.py:653
msgid "失败"
msgstr "failure"

4：编译 compilemessages 命令编译 mo 文件

修改好 django.po 文件后，执行下面的命令：
python3 manage.py compilemessages --local en
复制代码Django 会调用程序，根据 django.po 编译出一个名为 django.mo 的二进制文件，位置和 django.po 所在位置相同。这个文件才是程序执行的时候会去读取的文件。

用postman测试：

英文 Accept-Language:en

英文
中文 Accept-Language:zh

中文

二：vue前台:

1、安装
npm install --save vue-i18n
2、引用 –为了方便后去优化，单独新建一个i18n.js文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// Ready translated locale messages
const messages = {
  zh: {
    message: {
      hello: '嗨，世界',
    }
  },
  en: {
    message: {
      hello: 'hello world',
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}
export default new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
})

3、调用–在main.js里面引入

import i18n from './i18n'
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  i18n
})

4、在vue文件里面的实现
<p>{{ $t("message.hello") }}</p>