如何解决如何在Vue项目中存储要翻译的字符串
我想在我的应用程序中使用两种语言-所以我想要一个字典,例如字符串文件(有点像android开发中的那样),在其中我只存储带有id的字符串,并且可以通过id或带有我的参数的字符串轻松访问字符串语言。哪种文件易于在vue组件中解析并且适合我的用例?
解决方法
您可以使用普通的js文件并导出包含字符串的普通对象。
但是我强烈建议您改用vue-i18n。
安装:npm install vue-i18n
或如果您使用的是Vue Cli,请运行:vue add i18n
快速使用:
// If using a module system (e.g. via vue-cli),import Vue and VueI18n and then call Vue.use(VueI18n).
// import Vue from 'vue'
// import VueI18n from 'vue-i18n'
//
// Vue.use(VueI18n)
// Ready translated locale messages
const messages = {
en: {
message: {
hello: 'hello world'
}
},ja: {
message: {
hello: 'こんにちは、世界'
}
}
}
// Create VueI18n instance with options
const i18n = new VueI18n({
locale: 'ja',// set locale
messages,// set locale messages
})
然后在您的模板上
<p> {{ $t("message.hello") }} </p>
,
您可以安装:npm install vue-i18n
比在 src 中创建新文件:
i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
/*
* Load @/locales file with languages sets
*/
function loadLocaleMessages() {
// Read context
const locales = require.context('@/locales',true,/[A-Za-z0-9-_,\s]+\.json$/i);
const messages = {};
// Find matches language set and use that one
locales.keys().forEach((key) => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i);
if (matched && matched.length > 1) {
const locale = matched[1];
messages[locale] = locales(key);
}
});
return messages;
}
// Language of the browser UI.
let language = window.navigator.userLanguage || window.navigator.language;
// Use that
let currentLanguage = language.slice(0,2);
// Exports VueI18n settings global
export default new VueI18n({
locale: currentLanguage,fallbackLocale: 'de',formatFallbackMessages: true,silentFallbackWarn: true,messages: loadLocaleMessages(),});
在 main.js
中import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
/*
* START Import Internationalization - Translation
*/
import i18n from '@/utils/i18n.js';
// Use beforeEach route guard to set the language
router.beforeEach((to,from,next) => {
// Use the language from the routing param or default language
let language = to.params.lang;
// Default language
if (!language) {
language = 'en';
}
// Set the current language for i18n.
i18n.locale = language;
next();
});
//* END Import Internationalization - Translation
// Vue App
new Vue({
i18n,router,store,render: (h) => h(App),}).$mount('#app');
在 router.js
中import Vue from 'vue';
import Router from 'vue-router';
import Login from './views/Login.vue';
import i18n from '@/i18n';
Vue.use(Router);
const router = new Router({
mode: 'history',base: process.env.BASE_URL,routes: [
{
path: '/',redirect: `/${i18n.locale}/`,},// Language prefix for everyone
{
path: '/:lang',component: {
render(c) {
return c('router-view');
},children: [
{
path: '/',name: 'Login',component: Login,{
path: 'home',name: 'Home',component: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),{
path: '*',// Fullback path
redirect: '/',],// Scroll always on top the Page
scrollBehavior() {
document.getElementById('app').scrollIntoView();
},});
// Set the Routers
export default router;
然后使用您的语言环境 JSON 文件创建文件夹语言环境。
例如:
en.json
{
"general": {
"search": "Search","loading": "Loading..."
}
}
de.json
{
"general": {
"search": "Suchen","loading": "Laden..."
}
}
用法:
在模板中:{{ $t('general.search') }}
在JS中:this.$t('general.loading')
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。