Vue 国际化 i18n 多语言切换

Vue 国际化 i18n 多语言切换

第一步

新建一个vue 标准项目，创建步骤自己查资料项目结构如下

---

第二步

1.安装i18n 组件

npm install vue-i18n  -save

2.导入到项目 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vue18n from 'vue-i18n'

Vue.use(Vue18n)

Vue.config.productionTip = false
// 定义标识符
const i18n = new Vue18n({
   
  locale: 'zh-CN', // 语言标识
  // this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
   
    'zh-CN': require('./common/lang/cn'), // 中文语言包
    'en-US': require('./common/lang/en') // 英文语言包
  }
})
/* eslint-disable no-new */
new Vue({
   
  el: '