中文效果圖：
英文效果圖：
版本：
安裝：
npm install --save @nuxtjs/i18n?新建en.js與zh.js兩個文件進行切換顯示
en.js內(nèi)容?
import globals from './../js/global_val'
export default {
/******
* 公共內(nèi)容開始
* *****/
seeMore: "More Information", //查看更多
seeAgenda: "View the conference schedule", //查看議程
jtlRegister: 'Register for the Golden Gyro Award', //金陀螺獎報名參評/投票
registrationChannel: 'FBEC Registration channel', //大會參會報名通道
fbecland: 'FBEC LAND', //大會官方微站
application: 'Click to register for the selection', //點擊報名參評-pc
applicationOver: 'The entry channel is closed', //參評已結(jié)束-pc
mApplication: 'Click Register to vote', //點擊報名參評/投票-手機端
mAplicationOver: 'Registration is closed', //點擊報名參評/投票-手機端
headerData: [{
name: "Main page",
url: "/"
},
{
name: "Main-venue ",
url: "main-venue"
},
{
name: "Sub-venue",
url: "branch-venue"
},
{
name: "Golden Gyro Award",
url: "golden-top-award"
},
{
name: "Conference Exhibition Zone",
url: "conference-exhibition-area"
},
{
name: "More Exciting Content",
url: "more-exciting-content"
},
{
name: "Conference dynamics",
url: "conference-dynamics"
},
{
name: "Review of previous Conference",
url: ""
},
],
/******
* 公共內(nèi)容結(jié)束
* *****/
/******
* 首頁開始
* *****/
asideNav: [{
label: "Conference Main Keyvisual",
id: "zhuk",
},
{
label: "FBEC2023",
id: "2022",
},
{
label: "Conference Agenda",
id: "yicheng",
},
{
label: "Conference Guests",
id: "jiabin",
},
// {
// label: "大會展商",
// id: "zhanshang",
// },
{
label: "Great Video",
id: "shipin",
},
{
label: "Conference Distribution Map",
id: "fenbutu",
},
{
label: "Organization",
id: "zhuzhi",
},
{
label: "Conference Media",
id: "meiti",
},
{
label: "Conference Coverage",
id: "baodao",
},
{
label: "Conference Photo",
id: "huigu",
},
], //首頁時間軸
part1: {
time: 'Sheraton Shenzhen Futian Hotel · 8th Dec 2023',
des1: 'In2023, we have experienced the booming development of artificial intelligence in the early stage, and the rapid evolution of AI technology has not only multiplied the innovation of business models, but also given rise to market changes. When the market bubble recedes and the new wave of the AI era surges, we stick to our original intention, explore the future development pattern of science and technology and the Internet, and plan for the future value of new technology, new business, and new models. We insist that the only way to make progress is to maintain indomitable resilience and vitality. It is only when we work together that we can go farther.',
des2: 'The Future Business Ecology Link Conference 2023 and the 8th Golden Gyro Award Ceremony (“FBEC2023”) is organized by Gyro Technology, with the theme of “Collaboration Brings Mutual Benefits·Perseverance Leads to Success”, taking the perspective of “navigators” with industry foresight and the main line of “ice-breaking” journey, focusing on the frontier fields of Internet such as AI、metaverse、 XR、games、e-sports and digital economy, presenting the frontier achievements of science and technology, discussing the times and business issues, planning the future value of new technology, new business and new models, and going on an ice-breaking journey with the real courageous people in the winter under the drastic changes and innovations!'
}, //首頁大會簡介
}
zh.js內(nèi)容：
// 首頁
// const globals = require('./js/global_val.js')
import globals from './../js/global_val'
export default {
/******
* 公共內(nèi)容開始
* *****/
seeMore: "查看更多", //查看更多
seeAgenda: "查看議程", //查看議程
jtlRegister: '金陀螺獎報名參評/投票', //金陀螺獎報名參評/投票
registrationChannel: '大會參會報名通道', //大會參會報名通道
fbecland: '大會互動微站 FBEC LAND', //大會官方微站
application: '點擊報名參評', //點擊報名參評-pc
applicationOver: '參評已結(jié)束', //參評已結(jié)束-pc
mApplication: '點擊報名參評/投票', //點擊報名參評/投票-手機端
mAplicationOver: '點擊報名參評/投票', //點擊報名參評/投票-手機端
headerData: [{
name: "首頁",
url: "/"
},
{
name: "主會場",
url: "main-venue"
},
{
name: "分會場",
url: "branch-venue"
},
{
name: "金陀螺獎",
url: "golden-top-award"
},
{
name: "大會展區(qū)",
url: "conference-exhibition-area"
},
{
name: "更多精彩",
url: "more-exciting-content"
},
{
name: "大會動態(tài)",
url: "conference-dynamics"
},
{
name: "往屆回顧",
url: ""
},
],
/******
* 公共內(nèi)容結(jié)束
* *****/
/******
* 首頁開始
* *****/
asideNav: [{
label: "大會主K",
id: "zhuk",
},
{
label: "FBEC2023",
id: "2022",
},
{
label: "大會議程",
id: "yicheng",
},
{
label: "大會嘉賓",
id: "jiabin",
},
// {
// label: "大會展商",
// id: "zhanshang",
// },
{
label: "精彩視頻",
id: "shipin",
},
{
label: "會場分布圖",
id: "fenbutu",
},
{
label: "組織機構(gòu)",
id: "zhuzhi",
},
{
label: "合作媒體",
id: "meiti",
},
{
label: "大會報道",
id: "baodao",
},
{
label: "精彩現(xiàn)場",
id: "huigu",
},
], //首頁時間軸
part1: {
time: '深圳·大中華喜來登酒店 2023/12/08',
des1: '2023年，我們親歷了人工智能的蓬勃發(fā)展，AI技術(shù)的飛速演進，不僅加乘了商業(yè)模式的創(chuàng)新，也催生了市場變化。當市場泡沫退去，AI時代的新浪潮涌動，我們堅守初心，對未來互聯(lián)網(wǎng)發(fā)展形態(tài)進行探索，對新科技、新商業(yè)、新模式未來價值進行謀劃，我們堅信唯有保持百折不撓的韌性與生命力，不斷進化自身以適應市場環(huán)境變化，共榮共生，方能韌行致遠。',
des2: '2023未來商業(yè)生態(tài)鏈接大會暨第八屆金陀螺獎頒獎典禮（簡稱“FBEC2023”）由陀螺科技主辦，以“合力共生 · 韌者行遠”為大會主題，以具有行業(yè)前瞻洞察的“航行者”為視角，破冰之旅為主線，關(guān)注AI、元宇宙、XR、游戲、電競、數(shù)字經(jīng)濟等科技與互聯(lián)網(wǎng)前沿領(lǐng)域，全方位呈現(xiàn)科技前沿成果，聚焦時代與商業(yè)熱點議題，探討新科技、新商業(yè)、新模式的未來價值，與真正的勇者共赴劇變革新下的凜冬破冰之旅！'
}, //首頁大會簡介
}
在plugins下新建i18n.js
i18n.js內(nèi)容：
import zh_cn from '../assets/lang/zh.js'
import en_us from '../assets/lang/en.js'
const i18n = {
locales: ['en', 'zh'], //有多少地區(qū)的語言就添加多少種
defaultLocale: 'zh', //默認的地區(qū)語言
vueI18n: {
fallbackLocale: 'en', //回退策略，指定的locale中沒有找到對應資源的情況下使用的locale
messages: { //要渲染的信息，有多少語言就添加多少種
en:en_us,
zh:zh_cn
}
}
}
export default i18n
?在nuxt.config.js引入i18n.js
import i18n from './plugins/i18n'
export default {
modules: ['@nuxtjs/axios',['@nuxtjs/i18n',i18n]
],
}
切換按鈕（兩種切換方式選擇一種即可）
<!--方式一 -->
<div class="change-languag-box">
<nuxt-link
class="change-language cn-icon"
v-if="$i18n.locale !== 'en'"
:to="switchLocalePath('en')"
>中文</nuxt-link>
<nuxt-link
class="change-language en-icon"
v-if="$i18n.locale !== 'zh'"
:to="switchLocalePath('zh')"
>英文</nuxt-link>
</div>
<!--方式二 -->
<!--html -->
<div class="change-languag-box">
<div
class="change-language cn-icon"
v-if="$i18n.locale !== 'en'"
@click="changeLocale('en')"
></div>
<div
class="change-language en-icon"
v-if="$i18n.locale !== 'zh'"
@click="changeLocale('zh')"
></div>
</div>
<!--js -->
changeLocale(locale) {
// 在頁面中添加 changeLocale 方法，調(diào)用 $i18n.setLocale 方法來切換語言
this.$i18n.setLocale(locale);
},頁面展示文章來源：http://www.zghlxwxcb.cn/news/detail-722053.html
<template>
<!-- <client-only></client-only>加這個刷新頁面才不會顯示異常 -->
<client-only>
<!--內(nèi)容 -->
<div class="des">
<div
class="time"
:class="$i18n.locale == 'en' ? 'time-en' : ''"
v-html="$t('part1.time')"
></div>
<div class="detail" v-html="$t('part1.des1')"></div>
<div class="hr default-bg"></div>
<div class="detail">{{$t('part1.des2')}}</div>
</div>
</client-only>
</template>有導航的需要在導航切換的時候處理一下相關(guān)內(nèi)容：文章來源地址http://www.zghlxwxcb.cn/news/detail-722053.html
<!-- html（headerData為導航內(nèi)容） -->
<div class="com-header-cont flex-center-start">
<div
class="com-header-item"
v-for="(tabItem, tabIdx) in $t('headerData')"
:key="tabIdx"
@click="changeHeader(tabIdx, tabItem.url)"
:class="[
tabIdx == headerIdx ? 'headerActive' : '',
$i18n.locale == 'en' ? 'com-header-item-en' : '',
]"
>
<span :class="{ dropdownBtn: tabIdx == 7 }" @click="dropdown">{{
tabItem.name
}}</span>
<ul
v-if="tabIdx == 7"
class="dropdown-wrapper"
v-show="dropdownActive"
>
<li
class="dropdown-wrapper-li"
v-for="(item, index) in dropParams"
:key="index"
@click="closeDropdown"
>
<a target="_blank" :href="item.path">{{ item.name }}</a>
</li>
</ul>
</div>
</div>
<!-- js -->
// 導航切換
changeHeader(index, path) {
this.headerIdx = index;
// 默認中文，所以this.$i18n.locale == "zh"時走正常的路由跳轉(zhuǎn)
if (this.$i18n.locale == "zh") {
this.$router.push({ path: path });
} else {
if (process.client) {
let routerPath = this.$route.fullPath;
// 如果路由中沒有包含/en/就添加，如果有則走正常的路由跳轉(zhuǎn)
if (routerPath.indexOf("/en/") == -1) {
this.$router.push({ path: `${this.$i18n.locale}/${path}` });
} else {
this.$router.push({ path: path });
}
}
}
},
到了這里，關(guān)于nuxt使用i18n進行中英文切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
