vue-i18n中英文或者多语言切换的网站在vue项目中的合理布局结构
使用很简单,官网地址:http://kazupon.github.io/vue-i18n/zh/
npm install vue-i18n --save
新建一个文件夹。及其文件。如下图
index.js文件
import Vue from \'vue\';import VueI18n from \'vue-i18n\';
// import { isInLanguage } from \'@/utils/validate\';
import { getLocalStorage } from \'@/utils/local-storage\';
const { language } = getLocalStorage(\'language\');
Vue.use(VueI18n);
// 目前商量的方案是请求中携带
const i18n = new VueI18n({
// 防止恶意修改本地缓存造成异常,记得增加语言时去验证里增加
// locale: isInLanguage(language) ? language : \'en\', // 语言标识
locale: \'en\', // 默认显示的语言
messages: {
\'zh-CN\': require(\'./config/zh\'),
en: require(\'./config/en\')
}
});
export default i18n;
config文件下的en和zh结构是一样的
module.exports = { // 我的设计是一个单页面一个词,然后再加个公共的词。这样子
// 每个页面有一个对象,不管是用还是改都好找。我的原则是单词尽量和页面的名字
// 相近或者相同或者就用路由的名字
tabHome: {
// 这个假设是主页的
name: \'英文版\'
},
currency: {
currency: \'$\',
us: \'US\'
},
commonText: {
loading: \'Loading...\',
tip: \'Tips\',
confirm: \'Confirm\',
quit: \'Confirm exit?\',
noData: \'No Data\',
cancel: \'Cancel\'
},
}
然后是main.js里引入
import i18n from \'@/language\';new Vue({
router,
store,
i18n, // 这里
render: h => h(App)
}).$mount(\'#app\');
这个时候的就成功引入了。现在看使用。
vue单页面内使用
<p>{{ $t(\'tabHome.name\') }}<a href="/term">{{ $t(\'tabHome.name\') }}</a></p>
vue单页js内使用
<script>// 这么用 this.$t(\'setNickname.loginLoading\')
import { authProfile } from \'@/api/api\';
export default {
data() {
return {
nickName: \'\'
};
},
methods: {
cancelClick() {
},
saveNick() {
this.$toast.loading({
message: this.$t(\'setNickname.loginLoading\'),
duration: 0,
forbidClick: true,
mask: true
});
}
}
};
</script>
如果我想写个js工具类。又不在vue单页面内,也要用到中英文。这个时候要这样子
isPc.js
// 写法 I18n.t(\'tabHome.pleaseLogin\') 这个时候可是没有$符号的哦import I18n from \'@/language\';
console.log(I18n.t(\'requestErrText.pleaseLogin\'));
最后一个问题就是切换语言
import I18n from \'@/language\';let language = \'en\' // 想用英语就等于en想要中文就用zh-CN
I18n.locale = language;
vue组件内用
this.$i18n.local = \'en\';
结束,有问题希望指正。
以上是 vue-i18n中英文或者多语言切换的网站在vue项目中的合理布局结构 的全部内容, 来源链接: utcz.com/z/379323.html