nuxt2 国际化i18n使用

安装依赖，项目nuxt2
版本nuxt2.15.8

cnpm i @nuxtjs/[email protected]

vuex配置全局语言

export const state = () => ({
    language: "en",
    token: "",
});

export const mutations = {
    setLanguage(state, language) {
        state.language = language;
        this.$cookies.set("language", language);
    },
    getLanguage(state) {
        state.language = this.$cookies.get("language");
    }
};

plugins/i18.js

import en from '../locales/en.json'
import cn from '../locales/cn.json'
import * as store from '../store/index'

export default {
    locale: store.state().language, // 使用store中的语言配置
    fallbackLocale: 'en',
    messages: [en, cn]
}

nuxt.config.js

import i18n from "./plugins/i18n";

export default = {
   modules: ["@nuxtjs/i18n"],
       i18n: {
        langDir: "locales/", // 语言配置文件目录
        locales: [
            {
                code: "en",
                iso: "en-US",
                file: "en.json", // locales/en.json
            },
            {
                code: "cn",
                iso: "zh-Hans",
                file: "cn.json", // locales/cn.json
            },
        ],
        lazy: false,
        strategy: "prefix_except_default", // 默认语言不添加前缀
        defaultLocale: 'en', // 直接设置默认语言代码
        vueI18n: i18n, // 引入 i18n
        // detectBrowserLanguage: false,
        detectBrowserLanguage: {
            alwaysRedirect: false, // 根据需要决定是否总是重定向到检测到的语言
            useCookie: true,
            cookieKey: 'language',
            onlyOnRoot: true, // 这意味着只在用户首次访问应用的根路径时进行语言重定向

        }
    }
}

vue文件

<template>
  <button @click="changeLanguage('en')">英文</button>
  <button @click="changeLanguage('cn')">中文</button>
</template>

import { mapMutations } from "vuex";

  methods: {
        ...mapMutations(['setLanguage']),
        changeLanguage(newLanguage) {
            // 这里可以直接调用从 mutation 映射过来的方法
            console.log(newLanguage)
            this.setLanguage(newLanguage);
        }
  }

1.安装依赖
2.配置到nuxt.config.js module以及i18n配置项，进行对应js文件的引入
3.store 用于控制全局的语言
4.i18n 文件引入store使用里面的state值
5.vue 页面修改store中的值，对应的语言配置相应联动切换