Vue-i18n 国际化

Vue-i18n 国际化基本使用安装npminstall–savevue-i18n创建lang文件夹index.js中引入i18n并使用importVuefrom’vue’importVueI18nfrom’vue-i18n’Vue.use(VueI18n)consti18n=newVueI18n({//设置当前语言locale:’zh’,messages:{‘zh’:{name:’..

大家好,又见面了,我是你们的朋友全栈君。

基本使用

安装  npm install –save vue-i18n

创建lang 文件夹

Vue-i18n 国际化

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>

文件拆分

一般文件字段量很大,需要拆分文件

Vue-i18n 国际化

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>

Vue-i18n 国际化

Vue-i18n 国际化

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/134539.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • nfc怎么复制门禁卡,有什么操作教程吗「建议收藏」

    nfc怎么复制门禁卡,有什么操作教程吗「建议收藏」现在居住小区很多都有门禁,也是为了提升一个更安全的居住环境,在忙碌的生活中,人们有时会忘记带手机、钥匙、门禁卡等,像忘记门禁卡,会导致进不了小区,这时候该怎么办呢,接下来由换换回收小编分享nfc怎么复制门禁卡的操作教程。nfc是一些安卓手机上才有的功能它不仅能充值公交卡还可以充当门禁卡使用,方法很简单支持NFC的手机基本都可以门禁卡,但是需要相关APP的适配才可以,比如华为小米都有相关模拟门禁的APP,小米钱包有模拟门禁卡功能,前提是手机自带nfc射频芯片,但是目前为了安全起见,使用该功能…

  • 用Matlab筛选mirbase,一种基于miRBase数据库的无参的miRNA数据分析方法与流程

    用Matlab筛选mirbase,一种基于miRBase数据库的无参的miRNA数据分析方法与流程本发明涉及转录组测序领域,具体涉及一种在miRBase数据库中无本物种参考miRNA数据的miRNA测序的数据分析方法。背景技术:miRNA是一类由内源基因编码非编码单链RNA分子,在动植物中参与转录后基因表达调控。多数miRNA以单拷贝、多拷贝或基因簇的形式存在于基因组中。miRNA在很多物种中被广泛发现,且在进化进程中高度保守,因此研究miRNA的确切功能、目的靶基因、以及其作用机制,是转录组…

    2022年10月25日
  • 十五种文本编辑器

    十五种文本编辑器很多时候比如编程查看代码或者打开各种文档下我们都会用到文本编辑器,Windows自带的记事本功能很简陋并且打开大文件很慢,因此很多童鞋都会有自己喜欢的一款文本编辑器。在这里,西西挑选前15个最佳的文本编辑器,这些编辑器实际上主要适合程序员!如果觉得这些文本编辑器足够您的使用,欢迎点赞,如果还有更好的,可以给我们推荐哦。1.Notepad++中文版:这是Windows记事本一个最好…

  • win7默认共享(win7开启默认共享)

    访问win7默认共享:HEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\Policies\SystemDWORD值LocalAccountTokenFilterPolicy设置16数据值数据为1安全选项”,在右侧找到“网络安全:LAN管理器身份验证级别”,–选中“发送LM和NTLM响应(&)”

  • Wappalyzer 网站技术分析软件「建议收藏」

    Wappalyzer 网站技术分析软件「建议收藏」Wappalyzer工具支持分析目标网站所采用的平台构架、网站环境、服务器配置环境、JavaScript框架、编程语言等参数,同时还可以显示目标站点使用该技术的网站比例,例如有多少网站使用的是Wordpress、有多少网站使用AddThis第三方服务,其他还有网页服务器、分析工具、CDN、留言系统、控制台、网络空间等等,可以让你从使用比例中得出目前最流行的技术。使用方法:1.打开

  • Dubbo负载均衡策略实现[通俗易懂]

    Dubbo负载均衡策略实现[通俗易懂]一、dubbo版本说明基于dubbo版本2.6.2讲解二、负载均衡的接口关系@SPI(RandomLoadBalance.NAME)publicinterfaceLoadBalance{@Adaptive(“loadbalance”)<T>Invoker<T>select(List<Invoker<T>>invokers,URLurl,Invocationinvocation)throwsRp…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号