Vue国际化-i18n

Vue国际化-i18n

效果图

安装

yarn add vue-i18n

使用

1.在main.js中引入i18n。

import Vue from 'vue';
import VueI18n from "vue-i18n";
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;
Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh',	//默认语言
  messages: {
    'zh': require('./assets/lang/zh'),	//引入的是自己定义的语言包
    'en': require('./assets/lang/en')
  }
})

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

2.语言包内需要定义好项目中用到的语句。

(1).zh.js

module.exports = {
    message: {
        aboutMsg: '这是相关页面',
        zh: '中文',
        en: '英文'
    }
}

(2).en.js

module.exports = {
    message: {
        aboutMsg: 'This is an about page',
        zh: 'Chinese',
        en: 'English'
    }
}

3.页面中使用

<template>
	<div class="about">
		<h1>{{ $t('message.aboutMsg') }}</h1>
		<input type="radio" name="lang" id="zh" value="zh" v-model="lang" /><label for="lang">{{
			$t('message.zh')
		}}</label>
		<input type="radio" name="lang" id="en" value="en" v-model="lang" /><label for="lang">{{
			$t('message.en')
		}}</label>
	</div>
</template>

<script>
export default {
	data: () => ({
		msg: 'message.about',
		lang: 'zh'
	}),
	watch: {
		lang(newValue) {
			this.$i18n.locale = newValue;	//通过改变this.$i18n的值来改变当前语言
		}
	},
	mounted() {}
};
</script>

​ 页面中使用只需要$t('message.变量名')，注意给$t传递的参数是字符串。

vue国际化其他方法及优缺点

图片来自于：https://blog.csdn.net/qq_42269433/article/details/90902247?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf