vue-i18n国际化在data中切换不起作用

1 npm install vue-i18n

2引入插件包
// 引入插件和语言包
import VueI18n from 'vue-i18n'
import zh from '@/i18n/langs/zh'
import en from '@/i18n/langs/en'
Vue.use(VueI18n)

3实例化

//实例化vue-i18n
const i18n = new VueI18n({

  // 从本地存储中取，如果没有默认为中文，
  // 这样可以解决切换语言后，没记住选择的语言，刷新页面后还是默认的语言
  locale: localStorage.getItem('lang') || 'zh',
  
  messages: {
    'zh': zh, // 中文语言包
    'en': en // 英文语言包
  }
})

4// 将i18n实例挂载到vue上

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

3.创建文件

3. 创建中、英文包文件

创建两个文件，一个为zh.js代表中文，en.js代表英文，具体内容格式如下

//zh.js
export default {
  nav: {
    home: '首页',
    monitor: '监控',
    analyze: '分析',
    alarm: '报警',
    maintenance: '运维',
    config: '配置',