多语言i18n安装及使用方法

第一步：安装i18n

我开始直接安装的vue-i18n，然后项目跑不起来，换成vue-i18n@8.27.1才可以

npm install --save vue-i18n@8.27.1

第二步：创建语言包文件

main.js文件增加（注：文件里其他的东西不要删除）：

import i18n from '@/i18n';

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

在src下创建i18n文件夹，如下图：

 index.js内容：

import Vue from 'vue';
import Vuei18n from 'vue-i18n';

import zh from './lang/zh';
import en from './lang/en';

Vue.use(Vuei18n);

const i18n = new Vuei18n({
	locale: localStorage.getItem('lang') || 'zh', // 语言
	messages: {
		// 文案
		zh, // 文案的中文版
		en // 文案的英文版
	}
});

export default i18n;

 zh.js内容

module.exports = {
	test: {
		title: '测试'
	} 
}

 en.js内容

module.exports = {
	test: {
		title: 'test'
	}
}

第三步：使用i18n

1、.vue文件中使用

// template中使用：
<p> {{$t('test.title')}} </p>
<img src="" :alt="$t('test.title')">


// script中使用:
this.$t('test.title')

2、.js文件中使用

// 引入
import i18n from '@/i18n';

//使用
i18n.t('test.title')

第四步：语言切换

语言改变后无需刷新页面：

 this.$i18n.locale=‘切换的语言’