用vue做桌面应用程序_如何将国际化添加到Vue应用程序

50 阅读 0 评论 33 点赞

我是靠谱客的博主优雅月饼，最近开发中收集的这篇文章主要介绍用vue做桌面应用程序_如何将国际化添加到Vue应用程序，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

用vue做桌面应用程序

¡Hola! Bonjour. Ciao. 你好. Here is how you add internationalization to Vue.

你好！你好。再见。你好。这是将国际化添加到Vue的方法。

My company has plants in 37 countries. We write applications for the employees at these plants. Our application has to be translated into their native language. You can easily add internationalization to your Vue application. Let me show you how to add internationalization to the default Vue application.

我公司在37个国家设有工厂。我们为这些工厂的员工编写申请书。我们的应用程序必须翻译成其母语。您可以轻松地将国际化添加到您的Vue应用程序中。让我向您展示如何向默认的Vue应用程序添加国际化。

创建我们的应用程序 (Creating Our Application)

We will be creating an application using the Vue CLI. If you do not have it installed you can install it with this command:

我们将使用Vue CLI创建一个应用程序。如果尚未安装，则可以使用以下命令进行安装：

npm install @vue/cli -g

The -g flag will install the Vue CLI globally. Now that we have the CLI installed we can create a new application. Enter this command to create the application:

-g标志将全局安装Vue CLI。现在我们已经安装了CLI，我们可以创建一个新的应用程序。输入以下命令来创建应用程序：

vue create vue-internationalization

The Vue CLI will prompt you to pick a preset. You have the option of selecting the default preset or manually selecting features. I chose default.

Vue CLI将提示您选择一个预设。您可以选择默认预设或手动选择功能。我选择default 。

This will scaffold out a Vue application in a folder called vue-internationalization since this is the name we gave at creation. Now change into that directory with this command:

这将在一个名为vue-internationalization的文件夹中vue-internationalization一个Vue应用程序，因为这是我们在创建时就使用的名称。现在，使用以下命令进入该目录：

cd vue-internationalization

Once you are in the directory you will need to install all dependencies with this command:

一旦进入目录，您将需要使用以下命令安装所有依赖项：

npm install

To verify everything is running correctly enter this command:

要验证一切是否正常运行，请输入以下命令：

npm run serve

Now open your browser to localhost:8080 and you should see the following:

现在，将浏览器打开到localhost：8080，您应该看到以下内容：

Next, we will provide international translation for this application.

接下来，我们将为此应用程序提供国际翻译。

Vue-i18n插件 (Vue-i18n Plugin)

We will use the vue-i18n plugin for internationalization. Let’s add this plugin to our application. If you still have your server running, stop it. Then at the terminal enter this command:

我们将使用vue-i18n插件进行国际化。让我们将此插件添加到我们的应用程序中。如果仍在运行服务器，请停止它。然后在终端上输入以下命令：

npm install vue-i18n --save

Since this is a plugin, I am going to configure it as a plugin. Create a folder called plugins in your src folder. Create a file called i18n.js inside the plugins folder.

由于这是一个插件，因此我将其配置为插件。在src文件夹中创建一个名为plugins的文件夹。在plugins文件夹中创建一个名为i18n.js的文件。

To provide internationalization you have to tell Vue to use the vue-i18n plugin and provide it a messages object. The messages object will have the translations for every language your application supports.

为了提供国际化，您必须告诉Vue使用vue-i18n插件并为其提供一个message对象。消息对象将具有您的应用程序支持的每种语言的翻译。

The first step is to tell Vue to use the plugin. In the i18n.js file enter the following:

第一步是告诉Vue使用该插件。在i18n.js文件中，输入以下内容：

import Vue from 'vue';import VueI18n from 'vue-i18n';Vue.use(VueI18n);

Now Vue knows to use our internationalization plugin. Next step is to create the translations for every language we support. For demonstration purposes, I am going to add just two languages: English and Spanish. Once you understand how this works it is very easy to keep adding more and more languages to your application.

现在，Vue知道可以使用我们的国际化插件。下一步是为我们支持的每种语言创建翻译。出于演示目的，我将仅添加两种语言：英语和西班牙语。一旦了解了它的工作原理，就很容易为应用程序添加越来越多的语言。

To add languages we have to create a message object. Objects in JavaScript are made up of key-value pairs. The keys for the messages object will be the languages that we support. Let’s create this using English and Spanish for our supported languages. Add the following code below the Vue.use line in the i18n.js file.

要添加语言，我们必须创建一个消息对象。 JavaScript中的对象由键值对组成。消息对象的键将是我们支持的语言。让我们使用英语和西班牙语创建我们支持的语言。在i18n.js文件的Vue.use行下面添加以下代码。

const messages = {    'en': {},    'es': {}};

Next, we have to create a new internationalization object and tell Vue to use it. After the messages object add the following code:

接下来，我们必须创建一个新的国际化对象，并告诉Vue使用它。在messages对象之后，添加以下代码：

const i18n = new VueI18n({    locale: 'en', // set locale    fallbackLocale: 'es', // set fallback locale    messages, // set locale messages});

When we create our internationalization object we have to tell it the default locale that we will show initially. In case there is a problem showing this language we can set a fallback locale. Then we tell it the messages object that has our translations. The last line exports this object.

创建国际化对象时，我们必须告诉它我们将最初显示的默认语言环境。如果显示该语言有问题，我们可以设置一个备用区域设置。然后，我们告诉它包含翻译内容的message对象。最后一行导出该对象。

Vue needs to be told to use the internationalization. We do this in the main.js file. Open up the main.js file. Import our internationalization file with this command:

需要告诉Vue使用国际化。我们在main.js文件中执行此操作。打开main.js文件。使用以下命令导入我们的国际化文件：

import i18n from '@/plugins/i18n';

Note: if you are not familiar with using the @ in the import line, by default Vue knows that this points to the src directory. This allows you to avoid trying to do relative paths to the plugins directory.

注意：如果您不熟悉在导入行中使用@，默认情况下，Vue知道这指向src目录。这样，您就可以避免尝试为plugins目录创建相对路径。

We have to tell Vue to use it so we add i18n to the Vue object. Here is what your main.js file should look like:

我们必须告诉Vue使用它，因此我们将i18n添加到Vue对象。这是您的main.js文件应如下所示：

import Vue from 'vue';import App from './App.vue';import i18n from '@/plugins/i18n';Vue.config.productionTip = false;new Vue({    i18n,    render: h => h(App),}).$mount('#app');

添加国际翻译 (Adding International Translations)

Open up the i18n.js file. We are going to create our first translation. We will start with the phrase “Welcome to Your Vue.js App.” The translation for each language in the message object is an object.

打开i18n.js文件。我们将创建第一个翻译。我们将从短语“欢迎使用您的Vue.js应用程序”开始。消息对象中每种语言的翻译都是一个对象。

Just a reminder that an object is a key-value pair. The key is what we will use and value is the translation of the phrase in that language.

提醒一下，一个对象是一个键值对。关键是我们将使用的内容，而价值是该语言在该语言中的翻译。

So let me show you how this works with English. Update the file to include the following:

因此，让我向您展示如何使用英语。更新文件以包括以下内容：

const messages = {    'en': {        welcomeMsg: 'Welcome to Your Vue.js App'    },    'es': {}};

Now we have to provide a Spanish translation for this phrase. Since I do not speak Spanish fluently, I am going to use Google Translate.

现在，我们必须为该短语提供西班牙语翻译。由于我不会说流利的西班牙语，因此我将使用Google翻译。

I will copy the Spanish translation that Google Translate provides. Then I will add it to the Spanish section. Every language must use the same key. So our updated message object looks like this now:

我将复制Google翻译提供的西班牙语翻译。然后，将其添加到西班牙语部分。每种语言都必须使用相同的键。因此，我们更新后的消息对象现在看起来像这样：

const messages = {    'en': {        welcomeMsg: 'Welcome to Your Vue.js App'    },    'es': {        welcomeMsg: 'Bienvenido a tu aplicación Vue.js'    }};

Now that we have this translation we need to replace the English text in our default application to use our internationalization text. Open up the App.vue file. In the template, it is passing a prop called msg to the HelloWorld component. We want to replace this text with our international text. For simplicity, I am going to remove this prop and place the text in the HelloWorld component.

现在我们有了这个翻译，我们需要在默认应用程序中替换英语文本以使用我们的国际化文本。打开App.vue文件。在模板中，它将名为msg的道具传递给HelloWorld组件。我们想将此文本替换为我们的国际文本。为简单起见，我将删除此道具并将文本放在HelloWorld组件中。

Open the HelloWorld component. In the h1 tag, the prop msg is being displayed. Let’s replace it with the following code:

打开HelloWorld组件。在h1标签中，正在显示prop msg。让我们用以下代码替换它：

<h1>{{ $t('welcomeMsg') }}</h1>

The $t specifies we are using the internationalization plugin. The text we want to be displayed is the value of the welcomeMsg key in our message object. If you have your server stopped, you can start it with this command:

$ t指定我们正在使用国际化插件。我们要显示的文本是我们的消息对象中的welcomeMsg键的值。如果您的服务器已停止，则可以使用以下命令启动它：

npm run serve

Then go to your browser and you will see the international text displayed.

然后转到浏览器，您将看到显示的国际文字。

改变语言 (Changing Languages)

We want to be able to see the text change to Spanish if we set our local to be Spanish. The question is how do we do this? The simplest way is to provide a drop-down that shows the flags of the countries whose language support is provided in the application. Users can select their language which results in all text being rendered in that language. So we need a way to allow users to change languages.

如果我们将本地设置为西班牙语，我们希望能够看到文本更改为西班牙语。问题是我们该怎么做？最简单的方法是提供一个下拉列表，以显示在应用程序中提供语言支持的国家/地区的标志。用户可以选择他们的语言，从而以该语言呈现所有文本。因此，我们需要一种允许用户更改语言的方法。

To display the flags in a drop-down we could use a .png graphics file. That will clearly work. Let me show you a better way. The vue-flag-icon package provides a collection of all country flags in SVG. Let’s install it with this command:

要在下拉列表中显示标志，我们可以使用.png图形文件。显然可以。让我向您展示一种更好的方法。 vue-flag-icon软件包提供了SVG中所有国家标志的集合。让我们使用以下命令安装它：

npm install vue-flag-icon --save

Now that we have it installed we have to tell Vue to use it. Open up the main.js file. We have to import the package we just installed and tell Vue to use it. Your main.js file should look like this now:

现在我们已经安装了它，我们必须告诉Vue使用它。打开main.js文件。我们必须导入刚刚安装的软件包，并告诉Vue使用它。您的main.js文件现在应该如下所示：

import Vue from 'vue';import App from './App.vue';import i18n from '@/plugins/i18n';import FlagIcon from 'vue-flag-icon';Vue.use(FlagIcon);Vue.config.productionTip = false;new Vue({    i18n,    render: h => h(App),}).$mount('#app');

Next, we need to create buttons for the user to select their language. Open up the App.vue component. We are going to show a button for both languages. The user can click on the button to show the text in their language.

接下来，我们需要创建按钮供用户选择他们的语言。打开App.vue组件。我们将显示两种语言的按钮。用户可以单击按钮以用他们的语言显示文本。

In this demo, I am only supporting two languages. In a real-world app, you will probably be supporting many more languages. In that case, you would have an array of all the supported languages. Let’s do this now in our application so you can see how easy it is to transfer over to a bigger application.

在此演示中，我仅支持两种语言。在实际应用中，您可能会支持更多的语言。在这种情况下，您将拥有所有受支持语言的数组。现在在我们的应用程序中执行此操作，以便您可以看到将其转移到更大的应用程序有多么容易。

We need to add data to our script. We will have an entry called languages which will be an array of objects. The object will contain a flag, language, and a title. This is what the data should look like:

我们需要将数据添加到脚本中。我们将有一个称为languages的条目，它将是一个对象数组。该对象将包含标志，语言和标题。数据应如下所示：

data() {    return {        languages: [            { flag: 'us', language: 'en', title: 'English' },            { flag: 'es', language: 'es', title: 'Español' }        ]    };}

In our template, we need to create a button for each language in our languages array. We will use a v-for directive to loop over all the entries and create a button for each one. Here is the code you should add to the template before the img.

在我们的模板中，我们需要为我们的languages数组中的每种语言创建一个按钮。我们将使用v-for指令遍历所有条目并为每个条目创建一个按钮。这是您应该在img之前添加到模板的代码。

<div>    &lt;button v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">        <flag :iso="entry.flag" v-bind:squared=false /> {{entry.title}}    </button></div>

In the code above we loop through all entries in the languages array. Inside the button, we display the countries flag and the title. When you run this initially we get the default styling for a button provided by your browser. Let’s style the button, so add the following CSS in the style section:

在上面的代码中，我们遍历languages数组中的所有条目。在按钮内，我们显示国家标志和标题。最初运行此程序时，我们将为您的浏览器提供的按钮获得默认样式。让我们对按钮进行样式设置，然后在样式部分添加以下CSS：

button {    padding: 15px;    border: 1px solid green;    font-size: 18px;    margin: 15px;}

I am providing padding around the text and putting a green border around the button. The font-size makes the text readable on the screen. The margin is there just to set space between the two buttons as well as some space between the buttons and the image.

我在文本周围提供填充，并在按钮周围放置绿色边框。字体大小使文本在屏幕上可读。边距仅用于设置两个按钮之间的空间以及按钮和图像之间的一些空间。

When we created the button we told it to call a method changeLocale if a user clicks the button. This method will change the locale to the language on the button the user clicks. To change the locale we will first need to import our i18n plugin. You can import it with this command:

创建按钮时，我们告诉它如果用户单击按钮，则调用方法changeLocale 。此方法会将语言环境更改为用户单击按钮上的语言。要更改语言环境，我们首先需要导入我们的i18n插件。您可以使用以下命令将其导入：

import i18n from '@/plugins/i18n';

Now we can create our changeLocale method. Here is what it looks like:

现在，我们可以创建changeLocale方法。看起来是这样的：

methods: {    changeLocale(locale) {        i18n.locale = locale;    }}

Start your server. You will see the two buttons. Click the Spanish button. The welcome message should instantly change to Spanish.

启动服务器。您将看到两个按钮。单击西班牙语按钮。欢迎消息应立即更改为西班牙语。

完成翻译 (Finishing The Translations)

So far we have only translated one item on the screen. We can repeat what we have done for the remaining text on the page. Open up the i18n.js file. Here are my translations for the section headings on the page.

到目前为止，我们只翻译了屏幕上的一项。我们可以重复页面上其余文本的操作。打开i18n.js文件。这是页面上各节标题的翻译。

const messages = {    'en': {        welcomeMsg: 'Welcome to Your Vue.js App',        guide: 'For a guide and recipes on how to configure / customize this project,',        checkout: 'check out the',        plugins: 'Installed CLI Plugins',        links: 'Essential Links',        ecosystem: 'Ecosystem'    },    'es': {        welcomeMsg: 'Bienvenido a tu aplicación Vue.js',        guide: 'Para una guía y recetas sobre cómo configurar / personalizar este proyecto,',        checkout: 'revisar la',        plugins: 'Plugins de CLI instalados',        links: 'Enlaces esenciales',        ecosystem: 'Ecosistema'    }};

Now we need to update the HelloWorld component with these translations. Here is the translated template:

现在，我们需要使用这些翻译来更新HelloWorld组件。这是翻译后的模板：

<template>    <div class="hello">        <h1>{{ $t('welcomeMsg') }}</h1>        <p>            {{ $t('guide') }}<br>            {{ $t('checkout') }}            <;a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.        </p>        <h3&gt;{{ $t('plugins') }}</h3>        <ul>            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"                   rel="noopener">babel</a></li>            &lt;li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank"                   rel="noopener">eslint</a&gt;</li>        </ul>        <h3>{{ $t('links') }}</h3>        <ul>            <li&gt;<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li&gt;            <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener"&gt;Forum&lt;/a></li>            <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>            <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>;<;/li>            <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">;News</a></li>        </ul&gt;        <h3>{{ $t('ecosystem') }}</h3>        <;ul>            <li&gt;&lt;a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a&gt;</li>            <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>&lt;/li>;            <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"                   rel="noopener">vue-devtools</a></li>            <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>            <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>        </ul>    </div></template>

Start your server and view your application in the browser. Click between the two buttons. You will see the text automatically translate to the language you clicked. Watch this gif.

启动服务器并在浏览器中查看您的应用程序。在两个按钮之间单击。您将看到文本自动翻译为您单击的语言。观看此gif。

获取代码 (Get the Code)

I have the finished code available on GitHub. Please help me out and star the repo when you get the code.

我在GitHub上有完整的代码。获取代码后，请帮助我，并给存储库加注星标 。

结论 (Conclusion)

If your app is used by customers all over the world, you will need to add internationalization. To add support for multiple languages you have to install the Vue-i18n plugin. Then translate the text in your application for all the languages you support. The last step is to provide a way for users to toggle between different languages.

如果您的应用被世界各地的客户使用，则需要添加国际化。要增加对多种语言的支持，您必须安装Vue-i18n插件。然后在您的应用程序中翻译您支持的所有语言的文本。最后一步是为用户提供一种在不同语言之间切换的方式。

I hope you have enjoyed this article. Thanks for reading!

希望您喜欢这篇文章。谢谢阅读！

其他文章 (Other Articles)

I have written other articles that you might be interested in reading.

我写了其他您可能有兴趣阅读的文章。

How to build a Single Page Application using Vue.js, Vuex, Vuetify, and FirebaseHow to install Vue and build an SPA using Vuetify and Vue Routermedium.freecodecamp.orgThree years ago I attended a coding bootcamp. Today I became a Google Developer Advocate.This is the story of my journey and how I got theremedium.freecodecamp.orgContributing to Open Source isn’t that hard: my journey to contributing to the Node.js projectAs a developer, you should consider contributing to open source software. Many of your potential employers will look…medium.freecodecamp.orgWant a job in Tech? Here is how to use the top online marketplace for job seekers to get that job.LinkedIn is the world’s largest talent pool with 3 million active job listings. Let me show you how you can tap into…medium.freecodecamp.org

如何使用Vue.js，Vuex，Vuetify和Firebase构建单页应用程序 如何使用Vuetify和Vue Router安装Vue并构建SPA medium.freecodecamp.org 三年前，我参加了一个编码 训练营。 今天，我成为了Google Developer Advocate。 这是我的旅程的故事，我是如何到达那里的 。media.freecodecamp.org 为开源 做 贡献并不难：为Node.js项目做贡献的旅程 作为开发人员，您应该考虑为开源软件做贡献。 您的许多潜在雇主会看起来... medium.freecodecamp.org 想要从事技术工作吗？ 这是如何使用求职者所需要的顶级在线市场来获得这份工作的方法。 LinkedIn是全球最大的人才库，拥有300万活跃职位列表。 让我告诉你如何利用… medium.freecodecamp.org