前端实现多语言

首先，创建一个 Vue 项目并安装 vue-i18n 库

vue create vue-multilanguage-app
cd vue-multilanguage-app
npm install vue-i18n

1. 在 src 目录下创建一个 i18n 文件夹，然后在该文件夹下创建一个 index.js 文件，用来配置多语言支持：

2. // src/i18n/index.js
   import Vue from 'vue';
   import VueI18n from 'vue-i18n';
   
   Vue.use(VueI18n);
   
   const messages = {
     en: {
       greeting: 'Hello, World!',
     },
     fr: {
       greeting: 'Bonjour le monde!',
     },
   };
   
   const i18n = new VueI18n({
     locale: 'en',
     messages,
   });
   
   export default i18n;
   

3. 创建一个组件 HelloWorld.vue，用来展示多语言文本：

4. <template>
     <div>
       <h1>{{ $t('greeting') }}</h1>
       <button @click="changeLanguage">Change Language</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       changeLanguage() {
         this.$i18n.locale = this.$i18n.locale === 'en' ? 'fr' : 'en';
       },
     },
   };
   </script>
   

5. 在根组件 App.vue 中引入 HelloWorld.vue 组件，并注入 vue-i18n 实例：

6. <template>
     <div id="app">
       <HelloWorld />
     </div>
   </template>
   
   <script>
   import HelloWorld from './components/HelloWorld.vue';
   import i18n from './i18n';
   
   export default {
     components: {
       HelloWorld,
     },
     i18n,
   };
   </script>
   

7. 最后，在 main.js 中导入 vue-i18n 实例，并挂载应用：

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

   这样前端就实现多语言的功能