1.安装
npm install vue-i18n --save
2.在main.js文件中：
import i18n from './i18n/i18n'//我是把i18n单独放一个文件夹，这里是引用new Vue({router,store,i18n,render: h => h(App)}).$mount('#app')
3.在项目中单独建立一个i18n文件夹：
4.i18n文件夹里i18n.js内容：
import Vue from 'vue'import i18n from 'vue-i18n'Vue.use(i18n)import zh from './config/zh.js' //中文import en from './config/en.js'//英文/*---------使用语言包-----------*/const vueI18n = new i18n({locale: 'zh', //语言标识messages: {//使用语言包zh,en},silentFallbackWarn: true //仅在根本没有可用的转换时生成警告，而不是在回退时})export default vueI18n; //导出
5.config目录下zh.js和en.js：
这里面写每个页面需要中英文切换的文字,按照页面分
const zh = {login:{username: '用户名称',password: '密码'},home:{},about:{},my:{}}export default zh;//导出
const en = {login:{username: 'username',password: 'password'},home:{},about:{},my:{}}export default en;//导出
6.在页面组件里使用：
$t(“login.username”)相当于就是一个变量
<div>用户名</div> //原来的写法<div>{{$t("login.username") }}</div>//现在可以中英文切换
data里的数据变量写法： this.$t(“login.username”)
export default {data() {return {a: "",}},watch: {a() {this.a= this.$t("login.username");}} }
7.监听项目现在需要中文还是英文：
在app.vue里设置当前语言，这里我放在初始化阶段
单独写一个方法来返回zh或者en
import {getLanguage } from "@/utils/tool";export default {name: "App",data() {return {};},created() {// 设置语言this.$i18n.locale = getLanguage(); //getLanguage方法返回的是zh或者en},}
8.自己写的getLanguage方法：
这里可以根据自己的需求写
// 切换语言export const getLanguage = () => {let language;let defualtLanguage = 'zh';let reg = /^zh-/i;if (navigator && navigator.language) {language = reg.test(navigator.language) ? defualtLanguage : 'en';} else {language = defualtLanguage;}return language;};
9.遇到需求：根据中英文改样式，有时候英文字母太多，需要修改宽度
那么需要在页面里监听当前的语言，这里我选择把监听的zh或者en放到vuex的getters里
在store文件夹里（vuex）
import Vue from 'vue'import Vuex from 'vuex'import {getLanguage } from "@/utils/tool";//调用监听方法Vue.use(Vuex)const state = {language: getLanguage(),}const getters = {language: state => state.language,//语言切换}const mutations = {}const actions = {}export default new Vuex.Store({state,getters,mutations,actions})
在页面组件里看 this.$store.getters.language 是zh还是en来控制，可以打印看看
computed: {labelWidth() {return this.$store.getters.language === 'zh' ? 'width: 1.2rem' : 'width: 1.7rem'},
