vue-i18n中英文或者多语言切换的网站在vue项目中的合理布局结构

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

回到顶部