在eslint下使用vue-i18n

在eslint下编码报错真的是防不胜防，最近引用了eslint对代码进行了规范，额。。一言难尽啊。在vue-i18n这老是报错，经过修改后。。。

在main.js下引入多语以及vue-i18n：

import VueI18n from 'vue-i18n';
import LangEN from './assets/lang/en_US';
import LangCN from './assets/lang/zh_CN';
import LangTW from './assets/lang/zh_TW';

用了vue cli3.0的手脚架，所以就将lang文件夹放在了assets中。

其中，zh_CN.js为：

export default {
  language: '简体中文',
  title: '首页', 
}

同样也是在main.js中（当然也可以在其他地方）：

Vue.use(VueI18n);


const i18n = new VueI18n({
  //locale: Cookies.get().language, // 语言标识
  messages: {       
    zh_CN: { m: LangCN }, // 中文语言包      //zh_CN的值是键值对的形式，也可以在zh_CN.js中写成键值对形式，然后在这里写成 zh_CN:LangCN 的形式
    zh_TW: { m: LangTW }, // 繁軆语言包
    en_US: { m: LangEN }, // 英文语言包
  },
});


new Vue({
  el: '#app',
  i18n,     
   .....
})

这样，在使用时直接用$t调用就可以了。

$t('m.title')   

  之后发现了一个问题，当第一次登录系统会报下面的错误，但是重新刷新就好了。

页面显示会是这样的:

在网上查看了很多，但是还是没有解决，最后找到原因是：并没有拿到对应的locale。

从前面初始化VueI18n实例时可以看到，我的locale调用的是cookies中的语言，但是在实际中那个cookie是在这个之后才set的language，所以呢，只需要给这里加一个默认值

const i18n = new VueI18n({
  locale: Cookies.get().language || ‘zh_CN’ , // 语言标识 给默认值‘zh_CN’
  messages: {       
    zh_CN: { m: LangCN }, // 中文语言包 
    ......
  },
});

 

——渣渣笔记