Vue - i18n 国际化的使用

这篇具有很好参考价值的文章主要介绍了Vue - i18n 国际化的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、下载
yarn add vue-i18n@8.26.5

2、main.js 中引入
// 引入国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = {
  locale: 'zh-CN',    // 语言标识
  fallbackLocale: 'zh-CN', //没有英文的时候默认中文语言
  silentFallbackWarn: true, //抑制警告
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh-CN': require('./common/lang/zh'),   // 中文语言包
    'en-US': require('./common/lang/en')    // 英文语言包
  }
}

new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount('#app')


3、创建对应的语言包js文件，文件路径自己定，但是要与main.js引入路径保持一致
./common/lang/zh	// 中文语言宝文件路径
./common/lang/en 	// 英文语言包文件路径

en.js:
export const lang = { 
  test: 'English' //英文
}

export default lang

zh.js:
export const lang = {
  test:'中文'
}

export default lang


4、页面使用  下载element-ui即可直接复制粘贴使用
<template>
  <div class="home">
    <el-dropdown>
      <span class="el-dropdown-link">
        {{ $t('lang.test') }}<i class="el-icon-arrow-down el-icon--right" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item, index) in langList" :key="index" @click.native="onChangeLangClick(item)">{{ item.label }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
	data() {
		return {
      langList: [{ label:'中文', value: 0 }, { label: 'English', value: 1 }]
		}
	},
	methods: {
		onChangeLangClick(item) {
      this.$i18n.locale = item.value ? 'en-US' : 'zh-CN'
		}
	}
}
</script>

<style lang="scss" scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

参考网址:

使用: https://huaweicloud.csdn.net/638f133edacf622b8df8eb26.html?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-1-125181861-blog-123845480.235%5Ev38%5Epc_relevant_anti_t3_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-1-125181861-blog-123845480.235%5Ev38%5Epc_relevant_anti_t3_base&utm_relevant_index=2

模块化: VUE项目国际化处理_vue项目做国际化_谢栋_的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-511488.html

到了这里，关于Vue - i18n 国际化的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！