Vue项目i18n国际化语言切换

1.安装依赖

npm install vue-i18n

2.在目录下创建所需文件 ——》目录结构 在main.js中引入

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 国际化 import VueI18n from 'vue-i18n' import messages from './assets/lang/index' Vue.use(VueI18n) Vue.config.productionTip = false let dateTimeFormats = { // 放在这里 } const i18n = new VueI18n({ dateTimeFormats: dateTimeFormats, locale: 'zh', // 语言标识 // this.$i18n.locale // 通过切换locale的值来实现语言切换 messages }) new Vue({ router, store, i18n, render: h => h(App) }).$mount('#app')

index.js

import zh from './zh' import en from './en' const messages = { en: { message: en }, zh: { message: zh } } export default messages

中文 ：src/assets/lang/zh.js

export const message = { router: { home: '首页', name: '中文' } } export default message

英文 ：src/assets/lang/en.js

export const message = { router: { home: 'HHHHHHome', name: 'Chinese' } } export default message

如何使用

<template> <div class="home"> <span>{{$t('message.home')}}</span> <span>{{$t('message.name')}}</span> <button @click="changLaguages()">切换语言</button> </div> </template> <script> export default { data () { return { lang: 'zh' } }, methods: { changLaguages () { console.log(this.$i18n.locale) let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh' this.$i18n.locale = lang } } } </script>

详情请见 Vue i18n官网