您好,登錄后才能下訂單哦!
1、安裝 vue-i18n依賴
yarn add vue-i18n 或者 npm install vue-i18n --save-dev
2、在src/components下新建文件夾language,并在文件夾language下新建zh.js及en.js
【src/components/language/zh.js】 module.exports = { language: { name: 'English' }, user: { login:'登錄', register:'注冊(cè)', loginUsername:'請(qǐng)輸入郵箱/手機(jī)號(hào)', } } 【src/components/language/en.js】 module.exports = { language: { name: '中文' }, user: { login:'login', register:'register', loginUsername:'please input email or phone', } }
3、在main.js下引入及注冊(cè)vue-i18n
//中英文切換 import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n=new VueI18n({ locale:localStorage.getItem('languageSet')||'zh', //從localStorage里獲取用戶中英文選擇,沒(méi)有則默認(rèn)中文 messages:{ 'zh':require('./components/language/zh'), 'en':require('./components/language/en') } }) new Vue({ el: '#app', router, i18n, //把 i18n 掛載到 vue 根實(shí)例上 components: { App }, render: h => h(App), })
4、使用
<template> <span>{{$t('user.login')}}</span> //登錄 <input type="text" :placeholder="$t('user.loginUsername')" v-model="username" /> //輸入賬號(hào) <div @click="changeLanguage()">{{$t('language.name')}}</div> //切換中英文的按鈕 </template> <script> methods:{ changeLanguage(){ this.$i18n.locale=='zh'?this.$i18n.locale='en':this.$i18n.locale='zh' //設(shè)置中英文模式 localStorage.setItem('languageSet',this.$i18n.locale) //將用戶設(shè)置存儲(chǔ)到localStorage以便用戶下次打開(kāi)時(shí)使用此設(shè)置 }, } <script>
以上就是本次介紹的全部相關(guān)知識(shí)點(diǎn),感謝大家的學(xué)習(xí)和對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。