wordpress 4.9.9,中小企业网站优化,信誉好的龙岗网站设计,深圳 微网站我使用的是vue2.6版本#xff0c;具体使用其他版本可以进行修改
一、安装
npm install vue-i18n -D
二、配置
1、文件配置
①在src下创建 i18n 目录
②在 i18n 目录下创建 langs 文件夹 和 index.js文件#xff0c;具体如下 2、index.js代码如下#xff0c;这里使用了…我使用的是vue2.6版本具体使用其他版本可以进行修改
一、安装
npm install vue-i18n -D
二、配置
1、文件配置
①在src下创建 i18n 目录
②在 i18n 目录下创建 langs 文件夹 和 index.js文件具体如下 2、index.js代码如下这里使用了较多语言具体按项目定
import Vue from vue;
import VueI18n from vue-i18n;
//引入自定义语言配置
import de from ./langs/de;
import en from ./langs/en;
import es from ./langs/es;
import fr from ./langs/fr;
import jp from ./langs/jp;
import ko from ./langs/ko;
import th from ./langs/th;
import tw from ./langs/tw;
import vi from ./langs/vi;
import zh from ./langs/zh;
Vue.use(VueI18n); // 全局注册国际化包
// 准备翻译的语言环境信息
const i18n new VueI18n({locale: localStorage.getItem(lang) || zh, //将语言标识存入localStorage或sessionStorage中首次默认中文显示非首次则以localStorage为准messages: {de,en,es,fr,jp,ko,th,tw,vi,zh},silentTranslationWarn: true, //解决vue-i18n黄色警告value of key xxx is not a string和cannot translate the value of keypath xxx.use the value of keypath as default,可忽略globalInjection: true, // 全局注入fallbackLocale: zh, // 指定的locale没有找到对应的资源或当前语种不存在时默认设置当前语种为中文
});
const temLang localStorage.getItem(lang);
if (!temLang) {localStorage.setItem(lang, zh)
}
export default i18n;3、zh.js文件实例其他语言文件按这格式不变
// 中文
export default {loginTitle: 账号登入,registerTitle: 账号注册,loginTip: 欢迎回来使用您的电子邮箱或手机号登入,registerTip: 使用您的电子邮箱或手机号进行注册,userNamePlc: 请输入账号,userPassPlc: 请输入密码,login: 登入,register: 注册,overtime: 登录超时请重新登录,loginSuccess: 登入成功,registerSuccess: 注册成功,userNameTip: 请输入账号,userPassTip: 请输入密码,userOldPassTip: 请输入旧密码,userNewPassTip: 请输入新密码,userPassAgainTip: 请再次输入新密码,errorPassTip: 两次密码不一致,userPassSureTip: 请再次输入密码,jumpPageText: 当前页面需要登录查看请登录,
};4、为了方便使用添加了个hooks文件可以在vue页面引用此文件获取当前语言
// 语言配置
import { ref, computed, getCurrentInstance } from vue;export function useLang() {const vm getCurrentInstance();const lang ref(localStorage.getItem(lang) || zh);const langList ref([{label: English,src: require(../assets/images/lang/en.png),value: en,},{label: 简体中文,src: require(../assets/images/lang/zh.png),value: zh,},{label: 繁體中文,src: require(../assets/images/lang/tw.png),value: tw,},{label: ไทย,src: require(../assets/images/lang/th.png),value: th,},{label: 日本語,src: require(../assets/images/lang/jp.png),value: jp,},{label: Español,src: require(../assets/images/lang/es.png),value: es,},{label: Français,src: require(../assets/images/lang/fr.png),value: fr,},{label: Deutsch,src: require(../assets/images/lang/de.png),value: de,},{label: 한국어,src: require(../assets/images/lang/ko.svg),value: ko,},{label: Tiếng Việt,src: require(../assets/images/lang/vi.svg),value: vi,},]);// 获取当前语言对象const getLangObject computed(() {return langList.value.find((item) item.value lang.value);});// 设置语言const setLan (val) {localStorage.setItem(lang, val);lang.value val;vm.proxy.$i18n.locale val; //切换为英文// location.reload();};return { lang, setLan, langList, getLangObject };
}5、main.js配置
import Vue from vue;
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
import App from ./App.vue;
import router from ./router;
import store from /store/index;
import i18n from ./i18n;
import ./permission;
Vue.use(ElementUI);
Vue.use({i18n: (key, value) i18n.t(key, value),
});
Vue.config.productionTip false;
new Vue({router,store,i18n,render: (h) h(App),
}).$mount(#app);三、使用
1、template模板使用
template{{ $t(loginTitle) }}
/template
2、setup中使用这里使用的vue2.6和其他会有些差别
import { getCurrentInstance } from vue;
const vm getCurrentInstance();console.log(vm.proxy.$t(loginTitle)) 3、js文件中使用
import i18n from ./i18n;i18n.t(loginTitle)
