vue-i18n中英文或者多语言切换的网站在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';

结束，有问题希望指正。