nuxt.js中使用i18n国际化、本地化

nuxt.js中使用i18n国际化、本地化

更新：2020-11-10

最近我司官网英文版提上了日程，故更新下以前认识浅薄及错误的地方。

欢迎访问我司官网;https://www.qidufanyi.com

有翻译业务也可联系我哟~： 1441576268@qq.com

1. 安装 vue-i18n

npm install vue-i18n --save

2. 在 ~/plugins文件夹下新建 i18n.js, 并键入以下代码：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
    app.i18n = new VueI18n({
        locale: store.state.locale,
        fallbackLocale: 'zh-CN',  // 我这里默认语言为中文
        messages: {
            'en-US': require('@/locales/en-US.json'),
            'zh-CN': require('@/locales/zh-CN.json')
        }
    })

    app.i18n.path = (link) => {
        // 如果是默认语言，就省略
        if (app.i18n.locale === app.i18n.fallbackLocale) {
            return `/${link}`
        }
        return `/${link}?lang=/${app.i18n.locale}`
    }
}

3. 在vuex中保存当前语言状态
   在 ~/store文件夹下 新建 index.js文件，键入以下代码：

export const state = () => ({
    locales: ['en-US', 'zh-CN'],
    locale: 'zh-CN'
})

export const mutations = {
	// 此处为设置locale
    SET_LANG(state, locale) {
        if (state.locales.indexOf(locale) !== -1) {
            state.locale = locale
        }
    }
}

4. 在~/middleware文件夹下新建i18n.js文件用来控制语言切换

import utils from "../utils/utils";
export default function ({
                             isHMR, app, store, route, redirect, query,req
                         }) {

    // 从服务端请求头cookie中获取语种
    let locale;
    locale= utils.getcookiesInServer(req).lang
    // cookie中没有的情况下，获取路由参数中的语种，再没有就默认为中文
    if(!locale){
        locale = query.lang || 'zh-CN';
    }
    // 设置语种
    store.commit('SET_LANG', locale); // set store
    app.i18n.locale = store.state.locale;

    // 跳转该去的地方， isHMR我还没看是什么。
    if (isHMR) {
        return;
    }
    else if (!query.lang) {
        return redirect(route.fullPath);
    }
}

5. 修改nuxt.config.js文件配置如下：

  router: {
    middleware: 'i18n'
  },
  plugins: [
    '@/plugins/i18n.js',
  ],

6. 创建本地语言包
   新建 locales文件夹，创建en-US.json, zh-CN.json两个文件

   要保证语种之间键为一致的

// zh-CN.json
{
    "about": {
        "title": "关于",
    }
}

en-US.json

{

    "about": {
        "title": "About",
    }
}

7. page文件夹下创建文件
   page/index.vue

<template>
<div>
	<h1>{{$t('about.title')}}</h1>
    <button @click="changeLang('zh-CN')" v-if="$i18n.local!='zh-CN'">中文</button>
    <button @click="changeLang('en-US')" v-if="$i18n.local!='en-US'">英文</button>
</div>
</template>

<script>
export default {
  components: {},
  methods:{
     changeLang(l) {
         this.$i18n.locale = l;
         // 此时语言就会显示为切换的语言
    },
  }
};
</script>

有问题随时联系我。

欢迎访问旗渡法律翻译来查看最早效果： https://www.qidufanyi.com

另：承接各种翻译业务，包括网站翻译。