Javascript 如何在Vue项目中存储翻译字符串

我想在我的应用程序中使用两种语言——因此我想要一个类似字典的字符串文件（有点像android开发中的），在这里我只需使用id存储字符串，并且可以通过id轻松访问字符串，可能需要使用我语言的参数。什么样的文件在我的vue组件中易于解析并且适合我的用例？

您可以使用普通js文件并导出包含字符串的普通对象

但是我强烈建议你改用

安装：

npm安装vue-i18n

或者，如果您正在使用Vue Cli，请运行：

Vue添加i18n

快速使用：

//如果使用模块系统（例如通过vue cli），请导入vue和VueI18n，然后调用vue.use（VueI18n）。
//从“Vue”导入Vue
//从“vue-i18n”导入VueI18n
//
//Vue.use（VueI18n）
//已翻译的区域设置消息
常量消息={
嗯:{
信息：{
你好：“你好，世界”
}
},
ja:{
信息：{
你好：'こんにちは、世界'
}
}
}
//使用选项创建VueI18n实例
常数i18n=新VueI18n({
语言环境：“ja”，//设置语言环境
消息，//设置区域设置消息
})

然后在你的模板上

{{$t（“message.hello”）}

您可以安装：

npm安装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(),
});

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');

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;

在main.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(),
});

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');

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;

在路由器.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(),
});

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');

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;

然后用您的localesJSON文件创建文件夹locales

例如：

en.json

{
  "general": {
    "search": "Search",
    "loading": "Loading..."
  }
}

{
  "general": {
    "search": "Suchen",
    "loading": "Laden..."
  }
}

de.json

{
  "general": {
    "search": "Search",
    "loading": "Loading..."
  }
}

{
  "general": {
    "search": "Suchen",
    "loading": "Laden..."
  }
}

用法：

在模板中：

{{$t（'general.search'）}

---

在JS:

this.$t（'general.loading'）

Ciao中，您的vue应用程序是国际化的吗？一种改变你的应用程序语言的方法？更像是一本字典，如下面提供的Owl。