简单的使用(应用场景:少量几个页面的中英文切换)
1、安装 vue-i18n依赖
yarn add vue-i18n 或者 npm install vue-i18n
2、在src/components下新建文件夹language,并在文件夹language下新建zh.js及en.js
【src/components/language/zh.js】
module.exports = {
language: {
name: 'English'
},
user: {
login:'登录',
register:'注册',
loginUsername:'请输入邮箱/手机号',
}
}
【src/components/language/en.js】
module.exports = {
language: {
name: '中文'
},
user: {
login:'login',
register:'register',
loginUsername:'please input email or phone',
}
}
3、在main.js下引入及注册vue-i18n
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n=new VueI18n({
locale:localStorage.getItem('languageSet')||'zh',
messages:{
'zh':require('./components/language/zh'),
'en':require('./components/language/en')
}
})
new Vue({
el: '#app',
router,
i18n,
components: {
App
},
render: h => h(App),
})
4、在dom里使用 $t(' '),若在js里使用则 this.$t(' ')
<template>
<span>{{$t('user.login')}}</span> //登录
<input type="text" :placeholder="$t('user.loginUsername')" v-model="username" /> //输入用户名
<div @click="changeLanguage()">{{$t('language.name')}}</div> //切换中英文的按钮
</template>
<script>
methods:{
changeLanguage(){
this.$i18n.locale=='zh'?this.$i18n.locale='en':this.$i18n.locale='zh'
localStorage.setItem('languageSet',this.$i18n.locale)
},
remind(){
this.$toast(this.$t('user.loginUsername'))
}
}
<script>
复杂一点的(应用场景:整个项目大量页面需要做中英文切换)
就是基于上面的基础把文件做一下整理而已。有基础可以自己做整理的,可以略过。(update: 2021/06/28)
1、安装 vue-i18n依赖
yarn add vue-i18n 或者 npm install vue-i18n
2、在src下新建文件夹language,在文件夹language下新建文件index.js以及各模块文件夹如video、user,如图

一、user文件夹下新建login.js,register.js,index.js
【src/language/user/login.js】
const info={
CN: {
login: "登录",
loginUsername: "请输入用户名",
wxLogin: "微信登录",
},
EN: {
login: "Login",
loginUsername: "Please input username",
wxLogin:'Login by WeChat',
}
}
export default info
【src/language/user/register.js】
const info={
CN: {
register: "注册",
phoneRegister: "短信注册",
emailRegister: "邮箱注册",
},
EN: {
register: "Register",
phoneRegister: "Register by phone",
emailRegister: "Register by email",
}
}
export default info
【src/language/user/index.js】
import Login from "./login"
import Register from './register'
const CN={
Login: Login.CN,
Register: Register.CN
}
const EN={
Login: Login.EN,
Register: Register.EN
}
export default{
CN,
EN
}
二、在language文件夹下的index.js下填入以下内容
【src/language/index.js】
import Video from "./video/index"
import User from "./user/index"
const CN = {
Language: {
type: '中文'
},
Video: Video.CN,
User: User.CN
}
const EN = {
Language: {
type: 'English'
},
Video: Video.EN,
User: User.EN
}
export default {
CN,
EN
}
3、在main.js下引入及挂载vue-i18n,挂载根实例后即可全局使用
import LanguageData from './language/index'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n=new VueI18n({
locale:localStorage.getItem('languageSet')||'CN',
messages:{
'CN': LanguageData.CN,
'EN': LanguageData.EN
}
})
new Vue({
el: '#app',
router,
i18n,
components: {
App
},
render: h => h(App),
})
4、在dom里使用 $t(' '),若在js里使用则 this.$t(' ')
<template>
<span>{{$t('User.Login.wxLogin')}}</span>
<input type="text" :placeholder="$t('User.Login.loginUsername')" v-model="username" />
<div @click="changeLanguage()">{{$t('Language.type')}}</div>
</template>
<script>
methods:{
changeLanguage(){
this.$i18n.locale=='CN'?this.$i18n.locale='EN':this.$i18n.locale='CN'
localStorage.setItem('languageSet',this.$i18n.locale)
},
remind(){
this.$toast(this.$t('Video.VideoPlay.warningText'))
}
}
<script>
tips: 若觉得this.$t("Video.VideoPlay.warningText")写起来麻烦。
可以定义一个变量如VLGE,在created()和changeLanguage()里写上this.VLGE=this.$t("Video.VideoPlay")。
即可使用this.VLGE.warningText,{{VLGE.warning}}这种写法。
Tips:根据以上方法整理后,以后只需要在language文件夹下建立各个模块的文件夹(里面包含一个index.js以及此模块下各个页面的翻译数据文件)
填入中英文翻译数据,并在index.js下引入即可在页面中使用。

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步