中英文切换~~防止以后用

首先先介绍一下想要的功能,就是页面英文和简体中文的切换,就像现在这样.但是最终决定是发布上线后在开发这个功能,为了不影响现在的项目,所以我选择自建了一个项目来专门做这个功能。。。

 

首先先下载依赖,因为是自己一手做的项目,所以对于node版本一般都是用的比较高的版本,所以直接下载i18n的依赖:-----------  npm install vue-i18n@6

然后项目配置,首先是main.js的

import i18n from "./language/index";  //引入i18n

new Vue({

  i18n,

  render: h => h(App),

}).$mount('#app')  //挂载

很多人好奇我这个为什么写的这么简单,因为我也是第一次做,然后也是照着网上的方法做的，在新建文件下定义汉化版和英化包的

然后新建一个文件夹，只要等会找到就好,没有什么强制要求,然后在新建三个js文件,没有强制命名。我的分别是index.js(配置文件),en.js(英化包),zh.js(汉化包),如下图:

下面来着重介绍一下index.js配置文件:

import Vue from 'vue'  //引入vue

import locale from 'element-ui/lib/locale' //引入elemUI中的locale实现切换

import VueI18n from 'vue-i18n'   //引入i18n

// 引入各个语言配置文件

import en from './en'  //英化

import ch from './zh'  //汉化版

Vue.use(VueI18n)  //vue内使用i18n

// 创建vue-i18n实例i18n

const i18n = new VueI18n({

  // 设置默认语言

  locale: localStorage.getItem('locale') || 'en', // 语言标识  默认使用en(英化)

  // 添加多语言（每一个语言标示对应一个语言文件）

  messages: {

    en,

    ch

  }

})

locale.i18n((key, value) => i18n.t(key, value)) //重点：为了实现element插件的多语言切换

// 暴露i18n

export default i18n

下面的话就是要定义的数据了,我这边随便定义的,只是为了学习,大家可以看看

//zh.js 汉化

// Element中文样式

import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

const ch = {

    // 登录页

    login: {

        username: '账号',

        password: '密码',

        title: '访客系统管理端',

        signIn: '登录',

        userTip: '请填写账号名称',

        passTip: '请填写密码',

    },

    ...zhLocale

}

export default ch

//英文  en

// Element英文样式

import enLocale from 'element-ui/lib/locale/lang/en'

const en = {

  // 登录页

  login: {

    username: 'Username',

    password: 'Password',

    title: 'Visitor Booking Portal',

    login: 'Sign in',

    userTip: 'Please enter username',

    passTip: 'Please enter password',

  },

    ...enLocale

}

export default en

最重要的使用来了,小本本记好,全是干货~~~

因为我是为了学习，所以比较简略,大家见笑了

这个是我们在英化内定义的

 login: {

    username: 'Username',

    password: 'Password',

    title: 'Visitor Booking Portal',

    login: 'Sign in',

    userTip: 'Please enter username',

    passTip: 'Please enter password',

  },

所以现在打印出来了,效果先给你们,看看是否需要

在页面内使用:转发其他博主的

 

转发其他博主的....因为beautiful

我的是这样使用的::

我的是这样的，我喜欢直接CV代码,抱歉,确实不美观

   <span>{{ $t("login.username") }}</span>

$t的话是element ui支持的一种方法,具体什么我也不知道会什么要用这个,作为一名CV工程师需要知道那么多干嘛~~~~

切换的话用的比较简单,仅仅是一个效果而已.

 <el-button type="primary" @click="huan">换</el-button>

    huan(){

      console.log('loo',this.$i18n.locale)  //查看当前是什么语言

      if(this.$i18n.locale=='en'){   //如果是英的话

        this.$i18n.locale='ch'    //点击按钮让它换汉

      }else{  //如果是汉的话

        this.$i18n.locale='en' //变英

      }

    }

好了,时间到了,要去摸鱼了,有什么好的功能会更新,增删改查肯定不更新...

发现好多都是页面和路由一起中英文的,所以现在来更新了。。。。

前面说的是页面更新,现在来补充路由

在页面渲染的字段写好定义的变量名

login就是哪个对象,ddgl变量的首字母

然后在页面渲染的地方$t('.menuname'),这样就ok了...

用了好几个github上的项目亲测了一下才敢发出来,用到自己的项目里面,老板也不给涨工资🐕