1,vue-I18N 安装
NPM install vue-I18N --save-dev
2, 在 main.JS 文件中引入
- import VueI18n from 'vue-i18n';
- Vue.use(VueI18n);
- const I18N = new VueI18n({
- locale: localStorage.getItem('language')||'zh', // 使用 localStorage 缓存到本地, 当下次使用时可默认当前使用语言
- messages: {
- 'zh': require('./common/lang/zh'),
- 'en': require('./common/lang/en')
- }
- })
- new Vue({
- el: '#app',
- router,
- I18N,
- template: '<App/>',
- components: { App }
- })
3, 新建中英文语言文件
- zh.JS:
- module.exports = {
- language: {
- name: 'English'
- },
- navbar: {
- home: '首页',
- }
- }
- en.JS:
- module.exports = {
- language: {
- name: '中文'
- },
- navbar: {
- home: 'Home',
- }
- }
4, 创建一个切换语言方法 (写在 App.vue 可以全局控制);
- changeLang() {
- let locale = localStorage.getItem('language')||'zh';
- let temp=locale === 'zh' ? 'en' : 'zh';
- this.$I18N.locale=temp;// 改变当前语言
- localStorage.language=temp;
- }
5, 在 template 中的使用:
- <p>{{ $t('language.name') }}</p>
- <p>{{ $t('navbar.contact') }}</p>
总结
来源: https://www.jb51.net/article/149733.htm