vue-i18n中英文或者多语言切换的网站在vue项目中的合理布局结构

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

使用很简单，官网地址：http://kazupon.github.io/vue-i18n/zh/

npm install vue-i18n --save

新建一个文件夹。及其文件。如下图

index.js文件

import Vue from \'vue\';
import VueI18n from \'vue-i18n\';
// import { isInLanguage } from \'@/utils/validate\';
import { getLocalStorage } from \'@/utils/local-storage\';
const { language } = getLocalStorage(\'language\');
Vue.use(VueI18n);
// 目前商量的方案是请求中携带
const i18n = new VueI18n({
  // 防止恶意修改本地缓存造成异常，记得增加语言时去验证里增加
  // locale: isInLanguage(language) ? language : \'en\', //  语言标识
 locale: \'en\',  // 默认显示的语言
  messages: {
    \'zh-CN\': require(\'./config/zh\'),
    en: require(\'./config/en\')
  }
});
export default i18n;

config文件下的en和zh结构是一样的

module.exports = {
  // 我的设计是一个单页面一个词，然后再加个公共的词。这样子
  // 每个页面有一个对象，不管是用还是改都好找。我的原则是单词尽量和页面的名字
  // 相近或者相同或者就用路由的名字
  tabHome: {
    // 这个假设是主页的
    name: \'英文版\'
  },
  currency: {
    currency: \'$\',
    us: \'US\'
  },
  commonText: {
    loading: \'Loading...\',
    tip: \'Tips\',
    confirm: \'Confirm\',
    quit: \'Confirm exit?\',
    noData: \'No Data\',
    cancel: \'Cancel\'
  },
}

然后是main.js里引入

import i18n from \'@/language\';
new Vue({
  router,
  store,
  i18n,  // 这里
  render: h => h(App)
}).$mount(\'#app\');

这个时候的就成功引入了。现在看使用。

vue单页面内使用

<p>{{ $t(\'tabHome.name\') }}<a href="/term">{{ $t(\'tabHome.name\') }}</a></p>

vue单页js内使用

<script>
// 这么用  this.$t(\'setNickname.loginLoading\')
import { authProfile } from \'@/api/api\';
export default {
  data() {
    return {
      nickName: \'\'
    };
  },
  methods: {
    cancelClick() {
    },
    saveNick() {
      this.$toast.loading({
        message: this.$t(\'setNickname.loginLoading\'),
        duration: 0,
        forbidClick: true,
        mask: true
      });
    }
  }
};
</script>

如果我想写个js工具类。又不在vue单页面内，也要用到中英文。这个时候要这样子

isPc.js

// 写法 I18n.t(\'tabHome.pleaseLogin\') 这个时候可是没有$符号的哦
import I18n from \'@/language\';
console.log(I18n.t(\'requestErrText.pleaseLogin\'));

最后一个问题就是切换语言

import I18n from \'@/language\';
let language = \'en\' // 想用英语就等于en想要中文就用zh-CN 
I18n.locale = language;

vue组件内用

this.$i18n.local = \'en\';

结束，有问题希望指正。

以上是 vue-i18n中英文或者多语言切换的网站在vue项目中的合理布局结构 的全部内容， 来源链接： utcz.com/z/379323.html

回到顶部