vue2安装i18n

### 如何在Vue 2项目中安装和配置i18n

#### 安装vue-i18n库
为了使Vue应用支持国际化，需要先通过npm或yarn安装`vue-i18n`插件。

npm install vue-i18n@8.26.0 --save

此命令确保安装的是适用于Vue 2版本的兼容版[^1]。

#### 创建i18n实例
接着，在项目的src目录下新建一个名为`locale.js`的文件用于初始化国际化的设置：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

// 使用vue-i18n扩展程序
Vue.use(VueI18n)

export function createI18n() {
    const messages = {
        en: { message: { hello: 'hello world' } },
        zh: { message: { hello: '你好，世界' } }
    }

    return new VueI18n({
        locale: process.env.VUE_APP_I18N_LOCALE || 'en',
        fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
        messages,
    })
}

这段代码定义了两种语言的消息集合，并设置了默认的语言环境以及回退使用的语言环境[^2]。

#### 修改main.js引入i18n
编辑`main.js`文件，使其能够加载上面创建好的i18n实例:

import Vue from 'vue';
import App from './App.vue';
import {createI18n} from './locale';

const i18n = createI18n();

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

这样就完成了基本的配置工作。现在可以根据实际需求调整不同语言下的文本内容[^3]。

#### 设置多语言切换功能
为了让应用程序能够在不同的语言之间轻松切换，可以在组件内部调用如下方法实现动态改变当前所选语言的功能：

this.$i18n.locale = newValue;

其中newValue应该是已注册过的语言代号字符串（比如'en','zh'）。这允许用户界面根据用户的偏好自动更新显示的文字[^4]。