https://virgool.ir/feed/@benayateifa2026-11-11 10:56:52https://files.virgool.ir/upload/users/22242/avatar/foS1co.jpeghttps://virgool.ir/@benayateihttps://virgool.ir/vue-developers/سایت-چند-زبانه-در-nuxt-js-mtlioriau1yxسایت چند زبانه در nuxt jsسلام به جاوااسکریپتی های عزیز.کارهایی که میخواهیم انجام بدیم:نصب کتابخانه vue-i18n نصب و کانفیگایجاد یه میدلویر برای رسیدگی به وضیعت زبان های مختلفساخت فایل زبان هانصب کتابخانه vue-i18n$ npm install vue-i18n --saveداخل پوشه plugins یه پلاگین جدید بسازید با عنوان : i18n.jsمحتوای درونش:import Vue from 'vue'; import VueI18n from 'vue-i18n'; Vue.use(VueI18n); export default ({ app, store }) => { // Setup i18n app.i18n = new VueI18n({ locale: store.state.locale, fallbackLocale: 'fa', messages: { 'fa': require('~/locales/fa.json') } }); app.i18n.path = (link) => { if (app.i18n.locale === app.i18n.fallbackLocale) { return `/${link}`; } return `/${app.i18n.locale}/${link}`; } } من زبان پیش فرض رو فارسی گذاشتم و شما میتونید هر چیز دیگه ای بزارید.داخل store/index.js یه state تعریف میکنیم برای نگهداری زبان فعلی و زبان هایی که قراره داشته باشیم.state: () => ({ locales: ['fa','en'], locale: 'fa' }),اولی برای زبان هایی که داریم.دومی زبان فعلی. حالا تکه کد زیر رو تو قسمت mutations فایل store/index.js قرار بدید برای تغییر زبان فعلی:mutations: { SET_LANG(state, locale) { if (state.locales.indexOf(locale) !== -1) { state.locale = locale } } },خب حالا باید پلاگینی که ساختیم رو داخل nuxt.config.js فراخوانی بکنیم:module.exports = { build: { vendor: ['vue-i18n'] }, router: { middleware: 'i18n' // برای اعمال بر روی تمامی مسیر ها }, plugins: ['~/plugins/i18n.js'], }حالا نوبت ساختن فایل میدلویر هستش: middleware/i18n.js export default function({ isHMR, app, store, route, params, error, redirect }) { if (isHMR) { return } else if (!params.lang) {//اگر پارامتر زبان وجود نداشته باشد اظافه میکند return redirect('/fa' + route.fullPath) } const locale = params.lang || 'fa' store.commit('SET_LANG', locale) app.i18n.locale = store.state.locale }حالا باید فایل زبان هارو بسازیم.من یک فایل برای زبان فارسی و زبان انگلیسی میسازم و شما میتونید چندین زبان دلخواه خودتون رو بسازید. locales/fa.json { "links": { "home": "خانه", "about: "درباره ما" }, "index": { "title": "سلام دنیا", }, } locales/en.json { "links": { "home": "home", "about: "about" }, "index": { "title": "Hello world!", }, } حالا کافیه داخل پوشه pages یک پوشه بسازید با عنوان lang_ و بقیه صفحه هاتون رو داخل این قرار بدید.برای صدا زدن محتوایی که تعریف کردیم برای مثال من یه صفحه ای ایجاد میکنم :pages/_lang/index.vue<template> <div> <h1 class="page_title">{{ $t('links.home') }}</h1> <nuxt-link class="navbar-item" :to="'/' + $i18n.locale + '/about'">{{$t('links.contact') }}</nuxt-link> </div> </template> export default { head() { return { title: this.$t('index.title') } } } بعضی وقت ها نیاز هستش که برای ترجمه ها یه پارامتر هم تعریف بکنیم که یه مقداری رو بهشون پاس بدیم، برای اینکار از روش زیر استفاده میکنیم: { "links" : { "home": "خانه شماره {number}", "about: "درباره ما" }, "index": { "title": "سلام دنیا", }, } موقع صدا زدن هم به این شکل:<h1 class="page_title">{{ $t('links.home',{number:1}) }}</h1>امیدوارم بدردتون بخوره.موفق باشید.بهمن عنایتیبهمن عنایتیMon, 01 Jul 2019 13:23:05 +0430