vue-i18n 切换中英文

最新推荐文章于 2024-07-30 10:33:05 发布

pyxllq

最新推荐文章于 2024-07-30 10:33:05 发布

阅读量593

点赞数

分类专栏： Vue开发

本文链接：https://blog.csdn.net/pyxllq/article/details/105274378

版权

Vue开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.首先使用npm安装vue-i18n

安装命令：

npm install vue-i18n

2.在src/renderer目录(我的项目是如此)下创建如下目录和文件：

a):创建目录 src/renderer/i18n

b):创建目录src/renderer/i18n/langs

c):在src/renderer/i18n目录下新建文件i18n.js，内容如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale';
import zh from './langs/zh'
import en from './langs/en'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'


Vue.use(VueI18n)

const messages = {
  en: Object.assign(en, enLocale),
  zh: Object.assign(zh, zhLocale)
}

console.log(messages.zh)

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh',//zh表示此处默认为中文，改为en则默认为英文
  messages
})


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

export default i18n

d):在src/renderer/i18n/langs下创建文件zh.js和en.js

zh.js内容如下：

// 注意：一定是 exports，不是 export，否则会报错，报错信息是下列的中的内容不是 string
module.exports = {
    login:{
        login:'登录',
        loginsave:'是否保存登录账号及密码'
    },
    logout:{
        logout:'退出登录',
        logoutcomfirm:'是否确定退出登录',
        logoutclose:'是否确定关闭客户端'
    }
}

en.js内容如下：

module.exports = {
    login: {
        login: 'Login',
        loginsave: 'To save login account and password'
    },
    logout: {
        logout: 'Logout',
        logoutcomfirm: 'Are you sure to log out ?',
        logoutclose: 'Are you sure to close the client ?'
    }
}

3.在 main.js 中引入 vue-i18n （不过先引入 vue）：

import Vue from 'vue';
// import axios from 'axios';
import App from './App';
import i18n from './i18n/i18n';

4.需要把 i18n 挂载到 vue 根实例上：

new Vue({
  template: '<App/>',
  i18n,
  components: { App },
  store,
  router
}).$mount('#app')

接下来就是怎么使用了：

5.在html模板中使用：

<div id="app">
    <h1 style="font-size: 16px; text-align: center;">{{ $t("login.loginsave") }}</h1>
</div>

6.在js代码里使用：

this.$message({
            message: i18n.t("login.logoutcomfirm"),
            customClass: "main-message",
            type: "success"
          });

7.界面中英文切换按钮(文字按钮或者旗帜按钮)：

      <div class="lang">
        <el-button @click.native="toggleLang()" type="success" round size="small">English | 中 文</el-button>
        <!-- <country-flag country="us" size="small" @click.native="toggleLang()" />
        <country-flag country="cn" size="small" @click.native="toggleLang()" /> 旗帜切换语言-->
      </div>


toggleLang()的实现放在methods中

    toggleLang() {
      let lang = localStorage.getItem("locale");
      console.log(lang)
      if (lang == "zh") {
        localStorage.setItem("locale", "en");
        this.$i18n.locale = localStorage.getItem("locale");
        this.$message({
          message: "Switch to English!",
          type: "success"
        });
      } else{
        localStorage.setItem("locale", "zh");
        this.$i18n.locale = localStorage.getItem("locale");
        this.$message({
          message: "切换为中文！",
          type: "success"
        });
      }
    }
  },