vue cli 国际化

使用vue-i18n

npm install vue-i18n --save

配置 main.js

// i18n，国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('@/assets/languages/zh.json'),
    'en': require('@/assets/languages/en.json')
  }
});

let app = new Vue({
	router,
  store,
  // i18n，国际化
  i18n,
	render: h => h(App)
}).$mount('#app');

@/assets/languages/zh.json

{
  "common" : {
    "app" : {
      "name" : "app 名称"
    }
  }
}

@/assets/languages/en.json

{
  "common" : {
    "app" : {
      "name" : "app name"
    }
  }
}

xxx.vue

template:
{{$t("common.app.name")}}
js:
this.$t("common.app.name")

切换语言

this.$i18n.locale = 'en';

注:

1. 应该根据用户的地域设置默认语言
2. 用户切换语言后，应该种 cookie