nuxt2 國際化i18n使用

蔚蓝Azure發表於2024-06-21
UX

安裝依賴，專案nuxt2
版本nuxt2.15.8

cnpm i @nuxtjs/i18n@7.3.1

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中的值，對應的語言配置相應聯動切換

相關文章