大家好,又见面了,我是你们的朋友全栈君。
基本使用
安装 npm install –save vue-i18n
创建lang 文件夹
index.js中引入 i18n并使用
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
// 设置当前语言
locale: 'zh',
messages: {
'zh': {
name: '名字'
},
'en': {
name: 'name'
}
}
})
export default i18n
main.js中注册
import Vue from 'vue'
// 相对路径引入的App.vue文件
import App from './App.vue'
// 引入国际化
import i18n from './lang/index.js'
new Vue({
// 渲染节点
render: h => h(App),
i18n,
// 挂载store文件
store
}).$mount('#app')
在任意页面都可使用国际化
<h1>{
{$t('name')}}</h1>
文件拆分
一般文件字段量很大,需要拆分文件
index.js中引入
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from './zh'
import en from './en'
Vue.use(VueI18n)
const i18n = new VueI18n({
// 设置当前语言
locale: 'zh',
messages: {
en,
zh
}
})
export default i18n
中英文切换
methods中设置
changeLang() {
if (this.$i18n.locale == 'zh') {
this.$i18n.locale = 'en'
} else {
this.$i18n.locale = 'zh'
}
}
此时的切换知识页面语言,和系统没有关系,如果刷新页面,还是会回到中文
设置切换浏览器语言
上边写的当前的语言切换是默认的状态,初始化的时候一定加载的是默认的,比如默认的是中文,无论你后期改成什么状态,最后重新加载时一定是中文
此时需要设置系统的语言环境
使用localStorage去辅助完成国际化的语言环境设置
比如目前只支持中英文
此时需要获取当前的语言状态
navigator.language能够获取当前浏览器的语言环境zh-CN是中文,en-US是英文
lang文件index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from './zh'
import en from './en'
Vue.use(VueI18n)
//设置语言环境
//获取浏览器的语言
//console.log(navigator.language)
//浏览器的语言
const navLang = navigator.language
//如果浏览器支持语言,则为浏览器的当前语言,否则返回false
let localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false
//浏览器当前语言 改为本地设置的语言
if(localLang == 'zh-CN'){
localLang = zh
}else if(localLang == 'en-US'){
localLang = en
}
//console.log(localLang)
//获取localStorage(本地存储)的语言状态,如果没有设置为默认的语言环境,如果浏览器默认也没有语言环境,设置为中文
let lang = localStorage.getItem('lang') || localLang || 'zh'
console.log(lang)
//console.log(localLang)
//localStorage存储最新的语言信息
localStorage.setItem('lange',lang)
const i18n = new VueI18n({
locale:localStorage.getItem('lange') || 'zh',
messages:{
zh,
en
}
})
export default i18n
lang文件zh.js 和 en.js
export default{
'name':'姓名',
'sex':'性别',
'age':'年龄',
'form_活动名称':'活动名称',
'form_活动区域':'活动区域',
'form_活动时间':'活动时间',
'form_即时配送':'即时配送',
'form_活动性质':'活动性质',
'form_特殊资源':'特殊资源',
'form_活动形式':'活动形式',
'form_立即创建':'立即创建',
'form_请选择活动区域':'立即创建',
'form_选择日期':'选择日期',
'form_选择时间':'选择时间',
'form_美食餐厅线上活动':'美食/餐厅线上活动',
'form_地推活动':'地推活动',
'form_线下主题活动':'线下主题活动',
'form_单纯品牌曝光':'单纯品牌曝光',
'form_线上品牌商赞助':'线上品牌商赞助',
'form_线下场地免费':'线下场地免费',
'form_取消':'取消',
'form_语言切换':'语言切换'
}
export default{
'name':'name',
'sex':'sex',
'age':'age',
'form_活动名称':'Activity name',
'form_活动区域':'zone of action',
'form_活动时间':'Activity time',
'form_即时配送':'Instant delivery',
'form_活动性质':'Nature of activity',
'form_特殊资源':'Special resources',
'form_活动形式':'Activity form',
'form_立即创建':'Create now',
'form_请选择活动区域':'Please select active area',
'form_选择日期':'Select a date',
'form_选择时间':'Select a date',
'form_美食餐厅线上活动':'Food / restaurant online activities',
'form_地推活动':'Ground push activity',
'form_线下主题活动':'Offline theme activities',
'form_单纯品牌曝光':'Offline theme activities',
'form_线上品牌商赞助':'Online brand sponsorship',
'form_线下场地免费':'Online brand sponsorship',
'form_取消':'cancel',
'form_语言切换':'Language switching'
}
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//引入element-ui
import elementUi from 'element-ui'
//引入css
import 'element-ui/lib/theme-chalk/index.css'
//引入vue-i18n
import i18n from './lang/index'
Vue.use(elementUi)
new Vue({
render: h => h(App),
i18n
}).$mount('#app')
app.vue
<template>
<div>
<h1>{
{$t('name')}}</h1>
<h1>{
{$t('sex')}}</h1>
<h1>{
{$t('age')}}</h1>
<el-form ref="form" :model="form" label-width="80px" >
<el-form-item :label="$t('form_活动名称')">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item :label="$t('form_活动区域')">
<el-select v-model="form.region" :placeholder="$t('form_请选择活动区域')">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('form_活动时间')">
<el-col :span="11">
<el-date-picker type="date" :placeholder="$t('form_选择日期')" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker :placeholder="$t('form_选择时间')" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item :label="$t('form_即时配送')">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item :label="$t('form_活动性质')">
<el-checkbox-group v-model="form.type">
<el-checkbox :label="$t('form_美食餐厅线上活动')" name="type"></el-checkbox>
<el-checkbox :label="$t('form_地推活动')" name="type"></el-checkbox>
<el-checkbox :label="$t('form_线下主题活动')" name="type"></el-checkbox>
<el-checkbox :label="$t('form_单纯品牌曝光')" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item :label="$t('form_特殊资源')">
<el-radio-group v-model="form.resource">
<el-radio :label="$t('form_线上品牌商赞助')"></el-radio>
<el-radio :label="$t('form_线下场地免费')"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('form_活动形式')">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">{
{$t('form_立即创建')}}</el-button>
<el-button>{
{$t('form_取消')}}</el-button>
<el-button @click="langZh" type="primary">ch</el-button>
<el-button @click="langEn" type="primary">en</el-button>
<el-button @click="changeLang" type="primary">{
{$t('form_语言切换')}}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
},
langZh(){
this.$i18n.locale = 'zh'
window.localStorage.setItem('lang',this.$i18n.locale)
},
langEn(){
this.$i18n.locale = 'en'
window.localStorage.setItem('lang',this.$i18n.locale)
},
changeLang(){
if(this.$i18n.locale == 'zh'){
this.$i18n.locale = 'en'
}else{
this.$i18n.locale = 'zh'
}
window.localStorage.setItem('lang',this.$i18n.locale)
}
}
}
</script>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/134539.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...