vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟
更新時(shí)間：2023年11月15日 10:18:57 作者：洛千瑤吖
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟,項(xiàng)目中經(jīng)常有中英文切換的功能,接下來就簡單實(shí)現(xiàn)以下這個(gè)功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考
需求：vue項(xiàng)目實(shí)現(xiàn)中英文切換
效果圖如下：
步驟一：安裝vue-i18n
注意：如果使用vue3，則不用指定版本安裝，如果是vue2，就要指定版本如下：
npm i vue-i18n@8.23.0
步驟二：創(chuàng)建基本目錄
（language文件夾是翻譯的數(shù)據(jù)文件，views文件夾下的是頁面，part1和part2代表項(xiàng)目的不同模塊，每個(gè)模塊下都有對應(yīng)的頁面）
步驟三：簡單編寫下基本界面
App.vue
<template>
<div id="app">
<!-- 111 -->
<!-- 中英文切換 -->
按我切換中英文
<button @click="chagelanguage">{{ language }}</button>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
language: "en",//中英文切換
}
},
methods: {
// 中英文切換
chagelanguage() {
this.$i18n.locale == 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh' //設(shè)置中英文模式
if (this.$i18n.locale === 'zh') {
this.language = "en"
} else {
this.language = "zh"
}
},
}
}
</script>
<style lang="less" scoped></style>
views/part1/page1.vue
<template>
<div>
<h1 style="color:black">part1 page1</h1>
<p><span style="color:blue;font-weight:bold;font-size: 20px;">測試文本:</span>{{ $t("part1.page1.content") }}</p>
<br>
<br>
<a style="color: red;" @click="gopart1page2">點(diǎn)我跳轉(zhuǎn)part1 page2</a>
</div>
</template>
<script>
export default {
methods: {
gopart1page2() {
// 跳轉(zhuǎn)part1 page2（同一模塊下的不同頁面）
this.$router.push('/part1page2Router')
}
}
}
</script>
<style>
</style>views/part1/page2.vue
<template>
<div>
<h1>part1 page2</h1>
<p><span style="color:blue;font-weight:bold;font-size: 20px;">測試文本:</span>{{ $t("part1.page2.content") }}</p>
<br>
<br>
<a style="color: red;" @click="gopart2page1">點(diǎn)我跳轉(zhuǎn)part2 page1</a>
<br>
<a style="color: red;" @click="goback">返回</a>
</div>
</template>
<script>
export default {
methods: {
gopart2page1() {
// 跳轉(zhuǎn)part1 page2（不同模塊下的不同頁面）
this.$router.push('/part2page1Router')
},
goback() {
// 返回上一頁面
this.$router.go(-1)
}
}
}
</script>
<style></style>views/part2/page1.vue
<template>
<div>
<h1>part2 page1</h1>
<p><span style="color:blue;font-weight:bold;font-size: 20px;">測試文本:</span>{{ $t("part2.page1.content") }}</p>
<br>
<br>
<a style="color: red;" @click="goback">返回</a>
</div>
</template>
<script>
export default {
methods: {
goback() {
// 返回上一頁面
this.$router.go(-1)
}
}
}
</script>
<style></style>router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import part1page1 from '@/views/part1/page1'
import part1page2 from '@/views/part1/page2'
import part2page1 from '@/views/part2/page1'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: part1page1
}, {
path: '/part1page2Router',
component: part1page2
}, {
path: '/part2page1Router',
component: part2page1
}
]
const router = new VueRouter({
routes
})
export default router
步驟四：編寫翻譯文件
language/data/part1/page1.js
const data = {
ZH: {
// part1 page1
content: "我是part1page1,喜歡吃蘋果！"
},
EN: {
content: "I am Part1Page1 and enjoy eating apples!"
}
}
export default datalanguage/data/part1/page2.js
const data = {
ZH: {
// part1 page1
content: "我是part1page2,喜歡吃草莓！"
},
EN: {
content: "I am Part1Page1 and enjoy eating strawberries!"
}
}
export default datalanguage/data/part1/index.js
import page1 from "./page1"
import page2 from "./page2"
export default {
page1,
page2
}language/data/part2/page1.js
const data = {
ZH: {
// part1 page1
content: "我是part2page1,喜歡吃芒果！"
},
EN: {
content: "I am Part1Page1 and enjoy eating mangoes!"
}
}
export default datalanguage/data/part2/index.js
import page1 from "./page1"
export default{
page1
}language/en.js
import part1 from './data/part1/index'
import part2 from './data/part2/index'
const en = {
language: {
name: "english"
},
// part1
part1: {
page1: {
content: part1.page1.EN.content
},
page2: {
content: part1.page2.EN.content
}
},
// part2
part2: {
page1: {
content: part2.page1.EN.content
}
},
}
export default enlanguage/zh.js
import part1 from './data/part1/index'
import part2 from './data/part2/index'
const zh = {
language: {
name: "中文"
},
// part1
part1: {
page1: {
content: part1.page1.ZH.content
},
page2: {
content: part1.page2.ZH.content
}
},
// part2
part2: {
page1: {
content: part2.page1.ZH.content
}
},
}
export default zh步驟五：全局配置
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//中英文切換
import ZH from '@/language/zh.js' //中文最終匯總暴露的信息
import EN from '@/language/en.js' //英文
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
// localStorage.getItem('languageSet') || 'zh'
locale: 'zh', //從localStorage里獲取用戶中英文選擇，沒有則默認(rèn)中文
messages: {
'zh': ZH,
'en': EN
}
})
new Vue({
i18n,
router,
store,
render: h => h(App)
}).$mount('#app')另外：
如果要在js中引用如下
this.$t("part1.page1.content")在屬性中引用如下
<el-tooltip :content="$t('part1.page1.content')" placement="top"></el-tooltip>總結(jié)
到此這篇關(guān)于vue項(xiàng)目實(shí)現(xiàn)中英文切換的文章就介紹到這了,更多相關(guān)vue中英文切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3動(dòng)態(tài)組件<component>渲染失效原因分析
在vue2中使用正常,但是遷移到Vue3中,發(fā)現(xiàn)組件無法渲染, 本文給大家分別展示Vue2和Vue3的代碼,組件能正常在Vue2中渲染,在Vue確沒有渲染出來,并通過代碼示例給出了解決方法,需要的朋友可以參考下2024-11-11
electron-vue+electron-updater實(shí)現(xiàn)自動(dòng)更新(步驟源碼)
這篇文章主要介紹了electron-vue+electron-updater實(shí)現(xiàn)自動(dòng)更新,步驟源碼包括autoUpdater.js操控更新js文件，main.js也就是package.json內(nèi)的main指向的js文件，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
Vue3的watch功能是Vue生態(tài)系統(tǒng)中一個(gè)強(qiáng)大的工具,可以幫助開發(fā)者監(jiān)視數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作,這篇文章主要介紹了vue3中watch使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-10-10
五步教你用Nginx部署Vue項(xiàng)目及解決動(dòng)態(tài)路由刷新404問題
nginx 是一個(gè)代理的服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于如何通過五步教你用Nginx部署Vue項(xiàng)目及解決動(dòng)態(tài)路由刷新404問題的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了Vue列表頁渲染優(yōu)化的操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue 解除鼠標(biāo)的監(jiān)聽事件的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue使用echarts基本原理以及報(bào)錯(cuò)提示undefined(reading?init)的解決過程
Vue2使用ECharts時(shí),因未全局注冊或錯(cuò)誤引入導(dǎo)致TypeError報(bào)錯(cuò),解決方法為全局注冊,正確獲取DOM節(jié)點(diǎn)并設(shè)置寬高,通過生命周期或數(shù)據(jù)請求后調(diào)用getMain2方法初始化圖表,option對象需根據(jù)實(shí)際數(shù)據(jù)配置2025-09-09
vue項(xiàng)目npm install失敗的問題解決方案
本文主要介紹了vue項(xiàng)目npm install失敗的問題解決方案,文中通過圖文示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析
這篇文章主要為大家介紹了vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
組件是?vue.js?最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用，這篇文章主要介紹了Vue組件間傳值的實(shí)現(xiàn)2022-09-09