i18n使用，包含vue怎么使用i18n

1.安装 i18n

---

npm install vue-i18n@8.17.3  

注意：i18n最新版本存在兼容问题

2. src目录下创建i18n文件夹

---

|--src	
	|--i18n/
		|--lang/
			|--cn.js
			|--en.js
			|--index.js
		|--index.js

3.i18n不同目录下文件内容

---

// src\i18n\lang\cn.js
export default {
  message: {
    hello: '你好，世界',
    dataTest: 'data测试 ',
    computedTest: 'computed测试 '
  }
}

// src\i18n\lang\en.js
export default {
  message: {
    hello: 'hello world',
    dataTest: 'data test',
    computedTest: 'computed test '

  }
}

// src\i18n\lang\index.js
import en from './en'
import cn from './cn'

export default {
  en,
  cn
}

// src\i18n\index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import messages from './lang';

export default new VueI18n({
  locale: 'cn',
  messages,
})

4.main.js新填内容

---

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import i18n from './i18n'  //新填内容

new Vue({
  render: h => h(App),
  i18n  //新填内容
}).$mount('#app')

5. vue文件使用

---

<template>
  <div id="app">
    <!--    在标签内显示-->
    <div>{{ $t("message.hello") }}</div>
    <!--    绑定data数据-->
    <div>{{ $t(this.dataTest) }}</div>
    <!--    绑定计算属性（推荐）-->
    <div>{{ this.computedTest }}</div>
    <button @click="changeLang('cn')">切换到中文</button>
    <button @click="changeLang('en')">切换到英文</button>
    <div></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      dataTest: "message.dataTest",
    };
  },
  computed: {
    computedTest() {
      return this.$t("message.computedTest");
    },
  },
  methods: {
    changeLang(lang) {
      this.$i18n.locale = lang;
    },
  },
};
</script>

<style scoped>
</style>